알면 좋은 React 지식

컴포넌트가 리렌더 되는 상황들

• 자신이 전달받은 props 가 변경될 때
• 자신의 state가 바뀔때
• 부모 컴포넌트가 리렌더링될 때
• forceUpdate 함수가 실행될 때.

리액트 훅스 규칙

• Don't call inside loops
• Don't call inside conditions
• Don't call inside nested function
• Always use hooks at the top of the function
  (Hoisting 때문에 그럼)
• Only call hooks from react function

Component ReRendering 방지하는 방법

• shouldComponentUpdate lifecycle 사용
• functional(함수형엔 React.memo 사용)

FUNCTIONAL COMPONENT VS CLASS

• 리액트 v16 이전에는 상태(state) 관리를 하기 위해선 class component 로 구조를 짜야했다.

class App extends React.Component{
   constructor(props){
      super(props);
      this.state = { count: 0 };
      this.increaseCount = this.increaseCount.bind(this);
   }

   increaseCount(){
      this.setState({count: this.count+1});
   }
   // lifecycle methods like componentDidMount, componentDidUpdate etc.
   render(){
      return(
        <button onClick={this.increaseCounter}>INCR</button>
      );
   }

}

그러나 함수형이 가능해지게 되면서 hooks 를 사용 하여 상태(state)관리를 할 수 있게 되었다.

function myFunction () {
//some action
     const [count, setCount] = useState('');
}
const myFunction = () => {
//some action
     const [count, setCount] = useState('');
}