React Document의 내용을 요약해서 포스팅했습니다. 자세한 내용은 공식 문서를 참고해주세요.
Function Component
함수형 컴포넌트로, ES6의 화살표 함수를 사용해서 만드는 것도 가능합니다.
형식은 아래와 같습니다.
// props 객체 인자를 받은 후 React 엘리먼트를 반환하는 컴포넌트function Welcome(props){
return <h1>Hello, {props.name}</h1>
}
Hook
Hook은 React 16.8.0부터 지원하며, 함수형 컴포넌트의 가장 큰 특징들 중에 하나입니다.
개발 이유
Hook이 개발된 이유는 클래스 컴포넌트의 단점과 연결해서 이야기 할 수 있습니다.
- 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어려움
- 복잡한 컴포넌트들의 이해가 어려움
- Class는 사람과 기계를 혼동시킴
개발 이유에 따른 Hook의 장점
- 계층 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와줌
- 로직에 기반을 둔 작은 함수로 컴포넌트를 나눌 수 있음 (ex. 구독 설정 및 데이터를 불러오는 것과 같은 로직)
- Class없이 React 기능들을 사용하는 방법을 알려줌
State Hook
useState : 클래스형 컴포넌트를 작성하지 않아도 state와 같은 특징들을 사용할 수 있습니다.
// 선언법
const [count, setCount] = useState(0); //초기값 설정// 가져오기
<p>You clicked {count} times</p>// 갱신하기
<button onClick={() => setCount(count+1)}>
useState의 갱신은 클래스형 컴포넌트의 this.setState와 달리 state를 병합하는 것이 아니라 대체하는 것입니다.
Effect Hook
useEffect : 클래스형 컴포넌트 LifeCycle에서 componentDidMount, componentDidUpdate, componentWillUnmount가 합쳐진 것이라고 생각해도 됩니다. effect를 통해 state나 prop에 접근하고, 렌더링 및 모든 업데이트에서 수행하여 최적화 시킬 수 있습니다.
// 선언법
useEffect(() => {});정리(clean-up)
: effect는 정리를 위한 함수를 반환합니다. effect는 렌더링이 실행될 때마다 실행되므로, 이전의 파생된 effect에 대한 정리가 필요합니다.
따라서 리액트는 컴포넌트 마운트가 해제될 때 정리(clean-up)을 실행합니다.
Hook의 규칙
- 최상위(at the Top Level)에서만 Hook을 호출
: 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것을 보장하기 위해 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안됩니다. 조건문을 사용하길 원한다면 조건문을 Hook내부에 작성해야 합니다.
// 올바른 조건문 사용useEffect(function persistForm(){
if(name !== ""){
localStorage.setItem.('formData',name);
}
});// 올바르지 않은 조건문 사용if(name !== ""){
useEffect(function persistForm(){
localStorage.setItem('formData',name);
});
}
- React 함수 내에서 Hook을 호출
: 컴포넌트의 모든 상태 관련 로직을 소스코드에서 명확하게 보이도록 하기 위해서 Javascript 함수에서 호출하면 안됩니다.
Custom Hook
: 사용자 정의 Hook은 이름이 use로 시작하는 자바스크립트 함수로, 사용자 정의 Hook은 다른 Hook을 호출할 수 있습니다.
- React의 특별한 기능이라기 보다 기본적으로 Hook의 디자인을 따르는 관습입니다.
- 꼭 ‘use’로 시작하는 이름을 가져야 합니다.
- Hook은 상태 관련 로직을 재사용하는 매커니즘이지만, 사용자 Hook을 사용할 때마다 그 안의 state와 effect는 완전히 독립적이기 때문에, 같은 Hook을 사용하는 컴포넌트라고 하더라도 state를 공유하지 않습니다.
- 각각의 Hook에 대한 호출은 서로 독립된 state를 받습니다. 사용자 정의 Hook을 직접적으로 호출하기 때문에 useState와 useEffect를 호출한 것과 다름 없습니다. 하나의 컴포넌트 안에서 useState와 useEffect를 여러번 부를 수 있고, 이들은 모두 완전히 독립적입니다.
