[TIL] 엘리스 SW 엔지니어 트랙 Day 049

📖 오늘 배운 내용 - 2021.12.30

• Hooks
• props와 state
• useStates
• useEffect

 

📝 Hooks

• 컴포넌트의 함수가 많아질 때 클래스 구성 요소로 리팩토링 할 필요가 없다.
• UI에서 로직을 더 쉽게 분리하여 두 가지 모두 재사용 가능하다.
• 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 Hook 사용
• Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화가 가능하다.

 

📝 props와 state

• props : 상위 컴포넌트에서 하위 컴포넌트로 데이터를 넘길 때 사용.
  • 상위 컴포넌트에서 전달받는 값
• state : 그 컴포넌트 자체가 갖는 속성 → 아래로 넘겨주진 않음(넘겨주게 되면 그건 props라고 볼 수 있다.)
  • 컴포넌트 내부에서 선언하는 해당 컴포넌트의 상태

 

📝 useStates

const[<상태값저장변수>, <상태값갱신함수>] = userState(<상태초깃값>);

• 클래스형 컴포넌트에서 사용하던 state를 함수형 컴포넌트에서 사용할 수 있다.
• useStates는 함수를 바꾸는 함수이다.
  • useState은 2개의 배열을 return 한다.
  • 배열의 첫 번째 state의 값이고 두 번째는 그 state를 바꾸는 함수다.
• 상태는 해당 컴포넌트를 다시 실행시켜준다.

[React] 컴포넌트 상태 다루기 :: useState

 

📝 useEffect

• Effect Hook을 이용하면 생명주기 메소드를 구현할 필요 없이 함수형 컴포넌트에서 side effects들을 실행할 수 있게 해 준다.
• 함수형 컴포넌트에서 side effects들을 실행하는 것
• 모든 렌더링 하는 요소마다 원하는 작업을 수행할 수 있어 코드를 중복할 필요 X
• 즉, useEffect는 컴포넌트가 렌더링 이후에 의도한 효과에 대해서만 부수효과가 발생된다.

[React] 컴포넌트 사이드 이펙트 다루기 :: useEffect

 

💡 오늘 깨달은 것

• 클래스 컴포넌트의 단점은 복잡, 재사용 X
• setState가 비동기로 동작한다.

 

📌 참고

• React CRUD app with and without Redux - Convert a React App to a React+Redux App
• 성능 최적화 - React
• 리액트에서 절대 하면 안 되는 것 한 가지 - 컴포넌트 바깥 let
• What is useState, and why dont we use normal let?