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값으로 사용한다. 하지만 최선의 방법은 아니니 전자의 방법을 사용하도록 시도하자.
블로그 운영 x