[공부] 노마드 코더 React 4회차
2022. 1. 15. 23:40
공부/프론트엔드
✨ 느낀 점 👍 알게 된 점 useState에 값 추가하는 방법 setState함수로 변숫값을 바꾸는 방법은 총 2가지이다. 1. setState에 바로 값을 집어넣기 2. setState에 함수를 넣어 기존 배열을 복사하고, 새로운 값을 넣으면 된다. map함수는 배열의 하나하나 빼낼 수 있다. map함수로 배열안에 있는 값을 하나씩 빼내어 태그에 값 하나당 태그를 만들어 낼 수 있다. 주의사항으로는 map함수를 이용해 태그를 생성할 때는 key값이 필요한데, map함수로 빼낸 값에 key값이 없으면 map의 두 번째 매개변수를 index로 지정하고, index를 태그 안의 key값으로 넣으면 된다.
[공부] 노마드 코더 React 3회차
2022. 1. 14. 21:41
공부/프론트엔드
✨ 느낀 점 👍 알게 된 점 UseEffect를 사용하면 deps에 넣는것에 따라 실행 횟수를 조절할 수 있다. useEffect(함수, [deps]); [deps]안에 useState의 변수를 넣으면, 변수가 변할때마다 useEffect에 넣은 함수가 실행된다. 만약 빈 배열인경우에는 mount될때 딱 한번만 실행된다. useEffect(() => {}, [deps]); 추가적으로 useEffect안에 넣을 함수는 미리 함수를 정의한것을 넣을 수 있지만, 현장에서는 정의한 함수를 쓰지않고 바로 함수를 작성해 넣는다고 한다. cleanup function은 useEffect가 unmount될때 실행된다. 1. useEffect가 mount(실행)되면 useEffect의 첫번째 매개변수인 함수가 실행된다...
[공부] 노마드 코더 React 2회차
2022. 1. 13. 20:36
공부/프론트엔드
✨ 느낀 점 👍 알게 된 점 컴포넌트별로 CSS를 적용시킬 수 있다. 처음에 컴포넌트별로 CSS를 적용시킬 수 있다는 말을 들었을 때 당연한 소리를 하네?라고 생각했다. 왜냐하면 css를 파일별로 나누고, import 시키고, 해당되는 className을 적으면 적용된다는 것을 알고 있었기 때문이다. CSS파일을 styles로 치환하고, 태그에 className을 지정하지 않고, styles.(CSS파일에 적힌 className)을 옮겨 적으니 해당 CSS파일에서 선언한 클래스 명의 CSS효과가 지정이 된다. 특이한 점은 CSS파일에 중복된 className이 있어도 컴포넌트가 다르거나, 치환한 이름이 다르면 적용될 수 있다는 점이 신기했다. 그렇다면 클래스명은 실제로는 어떻게 표시될까? 위의 사진과같이..
[공부] 노마드 코더 React 1회차
2022. 1. 12. 22:12
공부/프론트엔드
Watch Now – 노마드 코더 Nomad Coders nomadcoders.co ❓ 상황 React를 학습하기위해 책을 읽고 강의를 듣고나서도 이해가되지 않았는데, 노마드 코더 강의를 듣고나서 비로소 이해가되었다. ✨ 느낀 점 💢 힘들었던 점 클래스형 컴포넌트, 함수형 컴포넌트 중 어느것을 배워야하지? 어떤 강의에서는 클래스형 컴포넌트로 알려주고, 어떤 책에서는 클래스형 컴포넌트와 함수형 컴포넌트를 알려주었다. 그래서 나는 의식의 흐름대로 2가지 방법을 알게되었다. 그러나 이러한 학습이 나에게 독이되었다. React에 대해 새롭게 배우는거다보니 가뜩이나 스트레스받는데, 함수형 컴포넌트 문법을 사용해야하는데 클래스형 컴포넌트 문법을 사용하는 등 헷갈리는 상황이 굉장히 많이 발생하였다. 그래서 하루정도 ..