Component
특징
규칙
함수형 컴포넌트, 클래스형 컴포넌트
왜 함수형 컴포넌트를 사용하는가?
함수형 컴포넌트
매개변수로 props를 받아오고, React Element를 반환
props
properties의 줄임말
어떤 값을 컴포넌트에 전달해줘야할때 사용!
구조분해할당!
children
컴포넌트 태그 사이의 내용을 보여주는 props
이거 왜 나 몰랐냐 .. 아니 알았는데 제대로 모르고 사용해왔따 ..
props는 읽기 전용이다
모든 react 컴포넌트는 자신의 props를 다룰때 반드시 순수함수처럼 동작해야함.
순수함수: 외부의 상태를 변경x + 동일한 인자에 대해 항상 똑같은 값을 리턴하는 함수
즉, 자신의 props를 수정하지 말것!
=> 그럼 어떻게? state
state (상태)
컴포넌트 내부에서 바뀔 수 있는 값. 동적인 값.
함수 컴포넌트에서 'useState'라는 Hook 함수 用
특징
- 동적인 데이터를 다룰때 사용
- setState는 동기함수지만, setState 함수 호출은 비동기적으로 일어난다.
- 따라서, 상태의 업데이트 결과가 즉각적으로 바로다음 코드라인에 반영 x
주의사항
- state를 바꿀때 직접 변경x
- 배열이나 객체를 업데이트 할때는 해당 종류에 맞게 사본 만들어 업데이트
컴포넌트는 어떻게 설계해야할까?
확장성, 재사용성
관심사에 따라 코드 분리. 단일 책임
외부에 제어를 위임시키는 것을 고려해보자.
Rendering
렌더링? 문서가 브라우저에 출력되는 과정.
리액트에서는, 컴포넌트가 현재 props와 state의 상태에 기반으로 화면에 그려지는것
단방향 데이터 흐름
데이터 흐름이 항상 부모-> 자식. 단방향!
전역적으로 관리하고 싶다면? 상태관리를 위한 라이브러리들을 사용 (Redux, Recoil 등)
컴포넌트 반복: map
key란? 리액트에서 컴포넌트 배열 렌더링했을때, 어떤 원소에 변동이 있는지 알아내기 위해 사용하는 속성
주의) key값으로 index 사용은 지양할것 (고유의 값이어야함)
조건부 렌더링
- 삼항 연산자
- early return
- 논리 연산자
Rerendering
언제 일어날까?
- 자신이 전달받은 props가 변경될때
- 자신의 state가 바뀔때
- 부모 컴포넌트가 리렌더링 될 때
forceUpdate 함수가 실행될 때 (강제 리렌더링)
state
state 사용 이유: 변화를 감지하여 화면에 영향을 주기 위함
if) setter함수 사용 않고 그냥 state자체를 조작한다면 -> 감지x -> 리렌더링 x
배열이나 객체 업데이트 할 때: 사본 만들어서 값 업데이트한 후, 사본의 상태를 setter로 업데이트함
Hooks
함수 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수
Hook은 왜 등장했을까?
라이프사이클
라이프사이클 메서드
클래스형 컴포넌트에서는 이러한 메서드를 직접 ~~ 관리..?
useEffect
리액트 컴포넌트가 렌더링 되고 난 직후의 특정 작업을 수행하도록 설정할 수 있는 Hook
(라이프사이클 메서드 中 componentDidMount + componentDidUpdate)
Clean-up
parameter로 넣은 effect함수의 return 함수.
언마운트 되기 전이나, 업데이트 되기 직전에 작업 수행
https://ui.toast.com/weekly-pick/ko_20200916
리액트 useEffect 개발자가 알아야 할 네가지 팁
리액트 훅의 useEffect를 사용할 때 꼭 알아야 할 네 가지를 공유하려고 한다.
ui.toast.com
useRef
- 함수 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해줌 (DOM을 가리키는 역할)
- 렌더링과 관계없이 바뀌ㅣㄹ수 있는 값인 로컬변수를 사용할 수 있게 해줌 (렌더링과 관련없는 값을 저장하기에 적합)
여기서부턴 약간 최적화?를 위한 hook
useReducer
useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 업데이트해주고 싶을 때 사용하는 hook
useMemo
특정 값이 바뀌었을때만 연산을 실행. 원하는 값이 바뀌지 않았다면 이전에 연산한 결과를 다시 사용하는 방식
=> 연산 최적화
useCallback
리렌더링될때마다 새로 만들어진 함수 사용하지 않도록, 최초 렌더링 또는 이후 특정값 업데이트가 있을때만 함수를 새로 생성해줌
=> 렌더링 성능 최적화
규칙
1. 촤상위에서만 hook 호출할 것
반복문, 조건문, 중첩 함수 내에서 hook 호출 ㄴㄴ
early return 실행 전에 호출할 것
2. 오직 React 함수 내에서만 hook 호출할 것
일반 js함수에서 호출 ㄴㄴ
- react 함수 컴포넌트에서 hook 호출
- Custom Hook에서 hook 호출