[React] Inflearn 처음 만난 리엑트(React) - State와 LifeCycle

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

React.js

 

 

강의

(Inflearn) 처음 만난 리엑트(React) - SOAPLE님

 

https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8/dashboard

[무료] 처음 만난 리액트(React) - 인프런 | 강의

 

 

6강. State and LifeCycle

State

• React Component의 변경 가능한 데이터를 의미한다.
• React를 사용하는 개발자가 따로 정의해서 사용한다.
• 렌더링이나 데이터 흐름에 사용되는 값 만을 state에 포함시켜야 한다.
• state는 JavaScript 객체이다.

 

 

State 정의 방법

Class Component

생성자(constructor)에서 정의한다.

 

예시

class LikeButton extends React.Component {
   construtor(props) {
      super(props);
      this.state = {liked: false};
   }
}

 

Function Component

useState() 라는 Hook을 사용하여 정의한다.

 

예시

function LikeButton(props) {
   const [ liked, setLiked ] = React.useState(false);
}

 

 

State 수정방법

state는 직접적으로 수정하면 안된다.

 

React에서 제공해주는 setState() 함수나 useState() Hook에서 정의한 set함수를 사용하여 수정하여야 한다.

728x90

 

 

Class Component

setState() 함수를 사용하여 수정한다.

 

예시

<button
   onClick={() => this.setState({liked: true})}
>
   Like
</butto>

 

Function Component

useState() Hook에 정의한 set함수를 사용하여 수정한다.

 

예시

<button
   onClick={() => setLiked(true)}
>
   Like
</button>

 

 

* React에서 State는 Component의 렌더링와 관련되어있기 때문에

 

마음대로 수정해버리면 개발자가 의도한 대로 프로그램이 동작하지 않을 수 있다.

 

 

 

 

LifeCycle

• Component의 생성 시점과 사망 시점 까지의 순서를 의미한다.
• 크게 Mount(출생), Update(인생), Unmount(사망)으로 이루어져있다.

 

Mount

1. 생성자가 실행된다. ( Component의 State를 정의한다. )
2. Component가 렌더링된다.
3. componentDidMount() 함수가 호출된다. ( Class Function Life Cycle 문법 )

 

 

Update

1. Component의 props가 변경되거나 setState() 함수를 통해 state가 변경되면 forceUpdate() 함수를 통해 Component가 재렌더링된다.
2. 렌더링 이후에 componentDidUpdate() 함수가 호출된다. ( Class Function Life Cycle 문법 )

 

 

Unmount

1. 상위 Component에서 하위 Component를 더 이상 호출하지 않을 때 Unmount 된다.
2. Unmount 직전에 componentWillUnmount 함수가 호출된다.

 

 

* Component는 계속 존재하는 것이 아니라 시간의 흐름에 따라 생성되고 업데이트 되다가 사라진다.

 

* Function Component에서는 componentDidMount, componentDidUpdate,

 

componentWillUnmount 함수와 동일한 기능을 하나의 useEffect 함수에서 제공해준다