React.js Class vs Function (hook)
26 Jan 2021 | ReactReact.js Class vs Function (hook)
-
리액트에서 컴포넌트를 만드는 방법
- Class : 리액트의 기능을 최대한 발휘할 수 있다
- Function : 함수의 문법만 사용, 기능 부족(state, life-cycle API 등)
- 최신 리액트에서는 hook을 이용해 함수 방식을 보완
-
Class Style Component
- 상위 컴포넌트에서 하위 컴포넌트에 props의 형태로 값을 전달
- this.props.xxxx의 형태
- props를 state화 시켜서 사용함으로서 state 값이 바뀔때마다 re-render 돼서 UI에 반영됨
- 메소드 정의시 function 안붙인다
-
Function Style Component
- 매개변수로 props를 받을 수 있다
- props.xxxx의 형태
- 함수 방식에서도 hook을 이용해 state를 사용할 수 있다. (React ver 16.8 이후 추가)
- 단, hook은 최상위 컴포넌트에서만 호출해야한다
- react의 useState를 import 한 후 useState() 메소드의 인자로 props.xxxx를 전달하면 길이가 2인 배열이 나오는데 이 배열의 0번째 값이 state의 값이다
- 배열의 1번째 값에는 클래스 방식의 setState 메소드와 동일한 기능을 하는 메소드가 담겨있다.
- 구조 분해 할당으로 코드의 간결화
- const [first, second] = useState(props.xxxx);
- first의 값은 state의 값이 저장
- second에는 setState 메소드가 저장
- second 사용시 주의할 점 ★★★
- state가 multiple line 일 경우 second 메소드로 state 변경시 변경할 녀석들 말고도 다른 state들도 명시적으로 적어주어야한다. (클래스 방식의 setState 메소드는 변경할 녀석들만 적으면 됨)
- 아니면 그냥 useState를 여러번 사용해서 state를 나누면 상관 x
- 메소드 정의시 const name = () => {…}
-
Class Style에서의 Life-cycle
- 클래스 방식에서는 생명주기 메소드를 사용할 수 있어, 원하는 타이밍에 어떠한 처리를 할 수 있다
- shouldComponentUpdate() 는 nextProp, nextState 두 가지 인자를 가지고 return 값으로 boolean 을 가지는데 현재 props이나 state값과 바뀐 prop, state 값을 비교해서 바뀐게 있으면 re-render를 하고 바뀐게 없으면 그냥 냅두는 강력한 기능을 한다
-
Function Style에서의 Life-cycle
- useEffect import 후 메소드 사용
- 인자로 함수를 정의할 수 있는데, 이 함수는 컴포넌트의 첫 render가 끝난 뒤 실행이 되고 UI가 바뀌어 re-render 될 때마다 실행이 된다
- 클래스 방식의 componentDidMount & componentDidUpdate 메소드와 동일한 기능을 한다
- componentDidMount & componentDidUpdate를 분리하여 사용하고 싶은 경우, useEffect의 두 번째 인자값으로 빈 배열[] 을 넣어준다. componentDidMount의 수행문은 최초 render시 한 번만 실행을 하게 된다
- 여러 개 설치 가능
- return 값으로 함수를 정의할 수 있는데 클래스 방식의 componentWillUnmount 메소드와 같이 컴포넌트가 cleanUp이 될 때 실행된다
- useEffect 메소드의 두 번째 인자값으로 배열을 넣어 감시 대상의 값이 바뀌었을 때에만 동작이 실행되도록 하여 성능을 높일 수 있다
- export default React.memo(name); <- React.memo() 메소드를 이용해서 클래스 방식의 shouldComponentUpdate()와 같은 효과를 낼 수 있다. 업데이트 된 놈들만 re-render되도록