2. React Component(리액트 컴포넌트)

2-1 개요

컴포넌트는 props를 받아서 UI가 어떻게 보여야하는지 정의하는 React Element를 출력하는 일종의 함수입니다. UI를 구성하기 위해서는 화면에 컴포넌트를 생성하고(Mounting), 업데이트하고(Updating), 지워야(Unmouning)합니다. 아래에서 자세히 다루어 보겠습니다.

---

2-2 Props와 State

컴포넌트는 2가지 인스턴스 속성(property) props와 state를 가지고 있습니다.

Props

• 부모 컴포넌트가 자식 컴포넌트에게 주는 값

• 자식 컴포넌트에서는 props를 받아오기만 하고, 받아 온 props를 직접 수정 불가능(읽기전용)

State

• 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다.

→ 부모컴포넌트로부터 props를 받아서 그 props에 대해 state에서 변경사항이 있으면 값을 바꾸어서 가상 돔으로 보낸뒤 update를 한다.

---

2-3 예제와 함께 실습

간단한 예제를 통해 알아야하는 함수들을 배워보겠습니다.

🔻 Code

💡

증가버튼을 누르면 넘버가 1 증가하고 감소버튼을 누르면 1 감소하는 예제

🔻Console

→ 처음에는 생성자를 호출하고 바로 render()을 한 뒤 componentDidMount()가 실행되었다.

→ 그 다음부터는 shouldComponentUpdate() → render() → componentDidUpdate 순으로 호출

— React.Component 상속

class Welcome extends React.Component

React 컴포넌트를 정의하려면 React.Component를 상속받아야 합니다.

—state 선언

state = {number : 0 }

state값을 선언합니다. 여기서는 number라는 state를 선언하여서 number가 바뀔 때 마다 동작하도록 구현하였습니다.

—props 선언

constructor(props) {
	super(props);
}
//or
constructor(props) {
	super(props);
	this.state = { number: 0}
}

→ 부모 컨테이너로부터 오는 props를 선언합니다. 이 코드에서는 부모 컴포넌트가 없기 때문에 출력값을 보면 아무것도 오지 않는 것을 알 수 있습니다. state를 아래 코드처럼 constructor안에서 선언 가능합니다.

—componentDidMount()

컴포넌트가 생성(Mount)된 직 후에 발생합니다. 외부에서 데이터를 불러와야 한다면, 네트워크 요청을 보내기 적절한 위치입니다.

—shouldComponentUpdate(nextProps, nextState)

state의 값이 변화하면 일어나는 메서드입니다.

파라미터는 바뀐 props와 state를 가져옵니다.

Return은 Bolean 값으로 하고 기본값은 true입니다.

false일때는 render()을 수행하지 않고 true일 때만 수행합니다.

여기서는 return값을 주지 않았기 때문에 true를 반환합니다.

—componentDidUpdate(prevProps, prevState)

갱신이 일어난 직후 발생합니다.

파라미터는 갱신이 일어나기 전 props와 state의 값을 가져옵니다.

이전과 현재의 props를 비교하여 네트워크 요청을 보낼 때 주로 사용됩니다.

—handleIncrease(), handleDecrease()

handleIncrease = () => {
    const {number} = this.state
    this.setState({
      number : number + 1
    })
  }

  handleDecrease = () => {
    this.setState(
      ({number}) => ({
        number : number -1
      })
    )
  }

setState() 함수를 통해 state의 값을 변하게 하는 메서드입니다.

setState() 함수를 실행하면 자동으로 shouldComponentUpdate() → render() → componentDidUpdate()함수가 자동으로 실행됩니다.

미리 state값을 선언해도되고, setState안 파라미터에 state를 선언해도 됩니다.

—render()

return값 안에 있는 React element를 반환합니다.

React는 Virtual Dom을 사용하기 때문에 처음에만 모든 구간이 실행되고 setState()를 통한 갱신이 있으면 전체를 다 다시 실행하는 것이 아니라 바뀐 값만 업데이트를 합니다.

---

2-4 마치며...

간단히 React Component의 개념을 소개하였습니다. 전에는 Component 위주로 React 프로젝트를 작성하였는데 React 16.8 버전이 업데이트 되면서 Hook이라는 기능이 새로 생겼는데 요즘에는 이 Hook을 더 많이 이용하게 됩니다. 하지만 Component를 모르고 Hook을 사용하게 된다면 이해하기가 굉장히 어렵습니다. 다음 장부터는 Hook을 공부하고 그 이후에 본격적으로 React-Native에 대한 내용을 포스팅하겠습니다.

끝까지 봐주셔서 감사합니다 🙏

Uploaded by Notion2Tistory v1.1.0