한 입 크기 리액트 TIL - 2

🐶 간단한 일기장 프로젝트

리액트에서 입력 값 처리하기

state 사용해서 관리!

1. useState로 state 생성

2. input 요소의 onChange 이벤트에서 setState 호출

3. onChange 이벤트의 이벤트 객체 e는 target.value 존재

4. 여러 input 요소의 state 관리 방식이 비슷하면 하나의 state라는 객체로 묶어서 관리 가능

<textarea 
      value={state.content}
      onChange={(e) => {
          setState({
              ...state,
              content: e.target.value,
          });
       }}
/>

리액트에서 배열 사용하기

리스트.map 사용해서 리스트 내의 값들을 컴포넌트에 쏙쏙!

• defaultProps로 기본 값인 빈 배열 넣어주기

다양한 HOOKS

hooks로 리액트의 생명 주기 관리 가능 !
1. useRef -> DOM 선택 ( focus 줄 때 등 ... 사용 )
2. useEffect -> side effect 수행 -mount/unmount/update
3. useCallback -> 특정 함수 재사용 ( 최적화 )
4. useMemo -> 연산한 값 재사용 ( 최적화 )
5. useReducer -> 복잡한 상태 관리 로직 분리 ... 의존성 문제 해결

레포지토리 링크

강의 노트 링크