[Next] 01 리액트 요약 및 기초

리액트 

1. 현재 점유율 1위 라이브러리
2. 역사: jQuery -> Angular -> React -> Vue -> Svelte

왜 나왔나?

• 페이지 전환 없이 앱 같은 느낌을 원함 (Single Page Application) 방식 유행
• 프론트의 비중이 높아지면서 데이터를 많이 다루게 됨. (MVC는 부적절 -> 대안이 필요!

Angular 의 등장

• Gmail(AJAX) -> SPA
• SPA으로 MVC 구현
• 앱같은 느낌은 성공함
• MVC라서 동일한 문제 -> 프론트에서 불편
• 2 way binding

현재 모델 (FLUX 패턴)

• Action -> Dispatcher -> Store -> View -> Action...
• 1 way binding (데이터 변경 및 오류 발생시 추적이 용이함)
• 대규모 웹 사이트에 적절하다.

React 컴포넌트로 전환

• 각자 JS와 CSS를 컴포넌트 단위로 책임진다.
• JSX 문법 사용
  
  • -> JS 실력이 중요해졌다.
• 컴포넌트를 만들어 조립을 함

JSX

• 확장자 .jsx (타입스크립트는 .tsx)
• 브라우저가 알아듣지 못하므로, 바벨, 웹팩, vite, swc 등으로 JS로 변환하여 사용한다.

 

리액트 기초

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의 대원칙

1. 화면에서 바뀌는 데이터를 상태(state)로 만들자
2. 반복 사용 되는 것을 컴포넌트로 만들자 (ex. todoForm)
3. 비슷한데 다른 부분을 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. 화면은 미리 다 만들어두고 보였다 안 보였다 한다

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

1. 부모가 자식의 데이터를 바꾸고 싶으면?
   : 데이터를 처음부터 부모의 state로 만들어서 자식에게 props로 내려준다.
2. 자식이 부모의 데이터를 바꾸고 싶으면?
   : 부모의 데이터를 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

7. 리렌더링 3가지

1. state가 바뀔 때
2. props가 바뀔 때
3. 부모 컴포넌트가 리렌더링 될 때

8. 불변성?

immer 같은 라이브러리로 극복하면 된다.
useEffect()에서 같이 deps에 넣는 객체가 참조가 완전히 끊겨야 리렌더링이 되므로~