본격적인 복습을 하는 중이다. 어제 TIL을 못 쓴 핑계를 대자면 복습하느라 피곤했다.
1. Component
- 'props'가 input, return이 output
- 제목은 대문자로 시작
- 함수가 시작되는 부분부터 return 사이는 JavaScript 영역
- return문 안쪽은 JSX(JavaScript + XML)문법, 이 안에서 JS문법은 {} 안에서 쓴다. (key, value페어의 객체가 들어갈 경우 {{ }}형태가 된다.)
2. Props
- 위에서 아래로, 부모에서 자식으로 (단방향)
- 읽기 전용
- 여는 태그, 닫는 태그 사이에 어떤 값이 있으면 React는 자동적으로 children이라는 props를 가지고 있다.
- 단순히 props라고 쓰여 있으면 내용물을 모르므로 구조분해할당으로 찢어놓는 것이 좋다.
3. useState
- 기본적인 형태는
const [state, setState] = useState(initialState);- state를 변수로 사용하고, setState를 이용해서 state값을 수정할 수 있다.
- 만약 state가 원시 데이터 타입이 아닌 객체 데이터 타입일 경우 불변성을 유지해줘야 한다.
- 함수형 컴포넌트 내에서 가변적인 상태를 갖게 한다.
- setState를 사용하는 방식에는 두 가지가 있다.
// 기존에 사용하던 방식
setState(number + 1);
// 함수형 업데이트
setState(() => {});위 코드와 같이 setState의 ()안에 수정할 값이 아니라 함수를 넣을 수 있다. 그리고 그 함수의 인자 안에서는 현재의 state를 가져올 수 있고, {} 안에서는 이 값을 변경하는 코드를 작성할 수 있다.
- 일반 업데이트 방식은 명령을 하나로 모아 최종적으로 한 번만 실행을 한다. 반면 함수형 업데이트 방식은 명령을 모아 순차적으로 각각 1번씩 실행을 시킨다.
4. useEffect
- 렌더링 될 때, 특정한 작업을 수행해야 할 때 설정하는 훅이다. (컴포넌트가 화면에서 보여졌을/사라졌을 때)
- 의존성 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행한다.
개발자(진)