[React] 기초 정리 (1)

noodle·2023년 12월 13일

react-basic

목록 보기

2/2

리액트 기초

1. 리액트는 데이터 위주로 먼저 생각해라

2. batch 때문에 바로 확인이 불가능한 점 (비동기 때문이 아님)

const onSubmit = (e) => {
  e.preventDefault();
  const nextTodo = [...todo, { id: ref.current++, title: newTodo, completed: false }]
  setTodo(nextTodo);
  console.log(todo); // 여기서는 바뀐 todo가 바로 반영되지 않는다. (비동기가 아닌 batch 문제!)
}

... 

useEffect(() => {
	// 여기서 todo가 바뀌었는지 확인할 수 있다.
}, [todo])

batch란 무엇?

3. React의 대원칙

화면에서 바뀌는 데이터를 상태(state)로 만들자
반복 사용 되는 것을 컴포넌트로 만들자 (ex. todoForm)

비슷한데 다른 부분을 props로 만들자

// 예시
<TodoItem key={1} index={0} item={item} onRemove={onRemove} setTodo={setTodo} />
<TodoItem key={2} index={1} item={item} onRemove={onRemove} setTodo={setTodo} />
<TodoItem key={3} index={2} item={item} onRemove={onRemove} setTodo={setTodo} />

화면은 미리 다 만들어두고 보였다 안 보였다 한다

4. 부모 자식 데이터 바꾸기

부모가 자식의 데이터를 바꾸고 싶으면?
: 데이터를 처음부터 부모의 state로 만들어서 자식에게 props로 내려준다.
자식이 부모의 데이터를 바꾸고 싶으면?
: 부모의 데이터를 props로 받아온 뒤, 부모의 데이터를 바꾸는 set함수도 같이 받아온다.

5. 함수 컴포넌트 VS 클래스 컴포넌트

함수! 이지, 함수형이 아니다. 순수함수가 아니다.

6. useEffect()

라이프 사이클

useEffect(() => {
	console.log("mount");
}, []); // mount될 때만 실행

useEffect(() => {
	console.log("re-render");
}); // 리 렌더링 될 때 마다 실행

useEffect(() => {
	console.log("todo");
}, [todo]);

useEffect(() => {
  // todo가 바뀔 때마다 실행됨
  return () => {
    // todo가 바뀌기 직전에 실행됨
  };
}, [todo]);

// 만약 todo가 a -> b로 바뀐다면,
// a useEffect -> a clean up -> b useEffect