리액트 기초 - 3일차

수강한 강의- Minjun Kim님의 누구든지 하는 리액트

누구든지 하는 리액트

Props와 State

Props

props는 부모 컨포넌트가 자식 컴포넌트에게 값을 전달할 때 사용한다. 컴포넌트 생성시 이를 불러와서 사용할 수 있다. 컴포넌트를 렌더링할 때 전달할 때 <Child value="value"/>처럼 value가 하나의 props이다. 부모가 자식에게 넘겨주는 것이다. 

만약 부모 컴포넌트에서 name값을 넣어주지 않으면 황유진의 자리에 '기본 이름'이라는 default값이 들어간다

이 코드는 아래처럼 컴포넌트 밖으로 뺄 수 있다.

props 전달의 또다른 방식으로 함수형 컴포넌트는 단순히 props만 가져와 보여주기만 하는 경우 사용한다. 예시는 아래와 같다.

함수형 컴포넌트 방식은 import에서 더이상 Component를 불러오지 않아도 된다.

함수형 컴포넌트는 초기 마운트 속도가 조금 더 빠르다 그리고 기능이 적어 메모리 자원을 덜 사용한다.

 

State

state는 컴포넌트 자기 자신이 들고 있는 것이다.  만약 변화가 필요하면 setState를 통해 값을 설정해준다.

즉 state는 내부에서 변경할 수 있다. 변경할 때에는 언제나 setState라는 함수를 사용한다. 

<Counter.js>

import React, { Component } from "react";

class Counter extends Component {
  //state정의
  state = {
    number: 0
  };
  //state.number의 값에 변화를 주기 위해서는 커스텀 메소드를 만들어주어야한다.
  handleIncrease = () => {
    //화살표 함수로 작성한 이유는 메소드, 함수들 내부에서 this가 뭔지 모르게 된다.
    //this.state.number=this.state.number+1; 는 절대 불가 컴포넌트에서 값이 업뎃되었는지 모름
    this.setState({
      number: this.state.number + 1
    });
  };
  constructor(props) {
    super(props);
    this.handleIncrease2 = this.handleIncrease2.bind(this);
  }
  handleIncrease2() {
    console.log(this);
    this.setState({
      number: this.state.number + 1
    });
  }
  handleDecrease = () => {
    this.setState({
      number: this.state.number - 1
    });
  };
  render() {
    return (
      <div>
        <h1>카운터</h1>
        <div>값 :{this.state.number}</div>
        <button onClick={this.handleIncrease}>+</button>
        <button onClick={this.handleDecrease}>-</button>
      </div>
    );
  }
}
export default Counter;

<App.js>

import React, { Component } from "react";
import "./styles.css";
import "./App.css";
import Counter from "./Counter";

class App extends Component {
  render() {
    return <Counter />;
  }
}
export default App;

 

이렇게 state에 대해 알아보았다 state는 컴포넌트 내부에서 값이 바뀔 수 있는 값이고 값이 바뀔 때마다 컴포넌트는 리렌더링 된다. 값을 바꿀 때에는 setState를 사용해야 리렌더링이 된다. props와 차이는 props는 일기 전용이고 부모가 자식에게 넘겨준다는 것이고 state는 자기 자신을 위한것이며 변경이 가능하다는 것이다.

 

LifeCycle API

LifeCycle API는 생명 주기같은 것이다. 컴포넌트가 브라우저상에서 나타날 때, 업데이트 될 때 , 사라질 때 작업을 하고 싶을 때 사용한다. 

종류로는 다음과 같은것들이 있다.

사용해야할 상황에서 적절히 쓰면 된다. 박스 하나하나가 모두 함수들이다. 

mounting은 컴포넌트가 브라우저 상에서 나타나는것이고, updating은 업데이트 될 때, unmounting은 사라질 때이다. 각각에 대해 살펴보면 다음과 같다.

1. Mounting

counsructor은 우리가 만든 컴포넌트가 실행될 때 가장 먼저 실행되는 함수이다. 주로 컴포넌트가 가지고 있을 state를 설정하거나 미리 해야하는 작업들을 처리한다.

getDerivedStateFromProps는 props로 받은 값을 state로 동기화 시키고 싶을 때 사용한다. mounting과 update과정 모두에서 사용된다.

render은 가장 많이 쓰인다.

실제 렌더링 되면 componentDidMount가 실행된다. 주로 외부 라이브러리를 사용하게 될 때 특정 dom에 차트를 그려달라는 코드를 넣을 수 있다. 컴포넌트가 나타난 후 몇초 후 뭔가를 하고싶거나 스크롤을 인식하고 싶을 때와 같은 이벤트 리스닝이나 api요청에도 사용한다.

2. Updating

shouldComponentUpdate는 컴포넌트가 업데이트 될 때 최적화를 시킬 때 사용한다. 업데이트 내용을 실제 브라우저 dom 상에 나타낼 때 사용한다. 즉 virtual DOM에도 렌더링을 할지에 대해 결정할 때 사용한다.

렌더링 후에 getSnapshotBeforeUpdate가 사용되는데 이는 브라우저에 업데이트되기 바로 직전에 호출된다. 스크롤의 위치, 해당 돔의 크기등을 가져올 때 사용된다.

만약 페이지가 바뀌었을 때 작업을 하고 싶으면 componentDidUpdate를 사용한다.

3. Unmounting

마지막으로 Unmounting에서 componentWillUnmount는 componentDidMount가 설정한 리스너를 없애는 작업을 한다.