알면 좋은 React 지식

CCY·2020년 6월 13일
0

React 

목록 보기
4/17
post-thumbnail

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

  • 자신이 전달받은 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('');
}
profile
✍️ 기록을 습관화 하자 ✍️ 나는 할 수 있다, 나는 개발자가 될거다 💪🙌😎

0개의 댓글