[React] 이론 정리 Mark VI

offdutybyblo·2020년 6월 17일
0

React 

목록 보기
8/9
post-thumbnail

1. React LifeCycle

constructor

constructor(props) {
  	super(props);
  	console.log("constructor");
}
  • constructor는 생성자 메소드로서 컴포넌트가 처음 만들어 질 때 실행된다.
  • 이 메소드에서 기본 state를 정할 수 있다.

componentWillMount

componentWillMount(){
  console.log("componentWillMount");
}
  • 컴포넌트가 DOM 위에 만들어지기 전에 실행된다.

render

  • 컴포넌트를 화면에 보여준다. 이를 보통 렌더링이라 한다.
  • 컴포넌트에서 꼭 필요한 함수로 렌더함수가 없으면 컴포넌트가 화면에 구현되지 않는다.
  • 브라우저에서 UI적으로 문제가 생겼을 경우 render() 부분을 먼저 확인하자.

componentDidMount

componentDidMount(){
  console.log("componentDidMount");
}
  • 컴포넌트가 만들어지고 첫 렌더링을 다 마친 후 실행되는 메소드이다.
  • 이 안에서 다른 JS프레임워크를 연동하거나, setTimeout,setInterval및 AJAX처리 등을 넣는다.
  • 이 부분에서 멘토님들이 강조한 부분은 렌더링이 모두 마친 후 이 메소드는 최초로 실행된 후 더 이상 실행되지 않는다. 그러므로 API로 데이터를 받을때 이 메소드를 사용한다.

componentWillReceiveProps

componentWillReceiveProps(nextProps){
  console.log("componentWillReceiveProps: " + JSON.stringify(nextProps));
}
  • 컴포넌트가 prop을 새로 받았을 때 실행된다.
  • prop에 따라 state를 업데이트 해야 할 때 사용하면 유용하다.
  • 이 안에서 this.setState()를 해도 추가적으로 렌더링하지 않는다.

shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState){
    console.log("shouldComponentUpdate: " + JSON.stringify(nextProps) + " " + JSON.stringify(nextState));
    return true;
}
  • prop 혹은 state가 변경 되었을 때, 리렌더링을 할지 말지 정하는 메소드

componentWillUpdate

componentWillUpdate(nextProps, nextState){
    console.log("componentWillUpdate: " + JSON.stringify(nextProps) + " " + JSON.stringify(nextState));
}
  • 컴포넌트 업데이트 되기 전에 실행됩니다. 이 메소드 안에서는 this.setState()를 절대 사용하면 안된다. 무한 루프에 빠져버림

componentDidUpdate

componentDidUpdate(prevProps, prevState){
    console.log("componentDidUpdate: " + JSON.stringify(prevProps) + " " + JSON.stringify(prevState));
}
  • 컴포넌트가 리렌더링을 마친 후 실행

componentWillUnmount

componentWillUnmount(){
    console.log("componentWillUnmount");
}
  • 컴포넌트가 DOM에서 사라진 후 실행되는 메소드

2. map 으로 컴포넌트 재사용 시 key가 의미하는 것은?

  • map() 함수를 사용하여 배열을 반복 실행할 수 있다.
  • 하지만 리액트에서 map()함수로 컴포넌트를 여러개 찍어내면 리스트의 각 항목에 key를 넣어야 한다는 경고가 뜬다.
  • 여기서 'key'는 리스트를 만들 때 포함해야 하는 특수한 문자열 속성이다.
  • key는 리액트가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다.
  • key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.
  • 예를들면, 우리가 api로 데이터를 받아서 map함수로 리스트를 만든다고 생각해보자. 모든 리스트들을 생성하고 난 후 우리가 원하는 리스트를 찝어서 삭제나 수정이 필요할 때 리액트에게 정확한 위치를 알려주는 key라고 생각하면 된다. 기본적으로 절대 겹치지 않을 각 리스트의 고유한 값을 부여하는게 제일 좋지만 보통 index값으로 사용한다. 하지만 최선의 방법은 아니니 전자의 방법을 사용하도록 시도하자.

profile
Front-End Devleoper 일껄요?

0개의 댓글