React :: Component, Props, State

Component

개념적으로JavaScript 함수와 유사한 Component 는,

• Props 라는 입력을 받고,
• 로컬 State 를 가지고,
• React Element 를 반환한다.

따라서 컴포넌트를 통해 재사용 가능한 개별 '조각'을 만들 수 있다.

가장 간단히, 이름을 Props 로 받아서 "Hello, {user}" 를 보여주는 Element 를 반환하는 Component 가 있다고 하자.

그러면 그 Component 를 다른 Compnent 에서 import 해서 한 조각을 갖다 붙이듯 사용할 수 있는 것이다.

 

* Props 의 개념은 밑에서 다루고, 일단 Component 가 외부에서 받아오는 데이터 라고만 알고 있자.

 

주의할 사항은, Component 이름은 항상! 대문자로 시작한다.

React 는 소문자로 시작하는 컴포넌트는 DOM 태그 (div 등) 로 처리하기 때문이다.

 

이런 Component 를 정의하려면 클래스/함수 를 통해 정의하는 두 가지 방법이 있는데, 하나씩 살펴보자.

 

함수 컴포넌트

Component 를 정의하는 가장 간단한 방법으로, JavaScript 함수를 작성하는 것이다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

보면 알 수 있듯, JavaScript 함수이므로 "함수 컴포넌트" 라고 부른다.

 

이는 현재 CRA (Creat-React-App. 2021.03.19) 를 통해 새 React 앱을 만들었을 때

./my-app/src/App.js 에서 사용한 컴포넌트 정의 방식이다.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

이런 식으로 App Component 를 만들고, export 하여 다른 곳에서도 App Component 를 사용하도록 만들어주는 것이 Component 의 사용 개념이다.

 

클래스 컴포넌트

ES6 Class 를 사용하여 컴포넌트를 정의할 수도 있다.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

이는 위에서 작성한 Welcome 과 React 관점에서는 동일하다!

다만 두 방식에서 서로 다른 추가 기능들이 존재한다.

 

함수 컴포넌트로 작성하면 간결하다는 장점이,

클래스 컴포넌트로 작성하면 여러 생명주기 메서드를 추가할 수 있다는 장점이 존재한다.

 

컴포넌트 합성

컴포넌트는 자신의 출력에 다른 컴포넌트를 참조할 수 있다.

function Friends() {
  return (
    <div>
      <Welcome name="React" />
      <Welcome name="HTML" />
      <Welcome name="JavaScript" />
    </div>
  );
}

 

---

Props

사용자 정의 컴포넌트로 작성한 엘리먼트가 있으면,

JSX 어트리뷰트와 지식을 해당 컴포넌트에 단일 객체를 전달하는데,

그 객체가 바로 "Props" 이다.

 

즉, 지금까지는 Element 를 DOM 태그(div,,등) 으로 나타냈는데, 이제는 사용자 정의 컴포넌트로 나타낼 수 있으면서, 그 컴포넌트에게 porps 이라는 형태로 객체를 전달해줄 수 있다는 것이이다.

 

앞서서 만들었던 Welcome 컴포넌트로 Element 를 나타내면 다음과 같다.

const element = <Welcome name="React" />;

그럼 Welcome 함수 컴포넌트를 정의하고, 렌더링하는 과정을 살펴보자.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="React" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

1. <Welcome name="React" /> 엘리먼트로 ReactDOM.render() 호출
2. React 가 이 element 를 발견하면, {name: 'React'} 를 props 로 하여 Welcome 컴포넌트를 호출한다.
3. Welcome 컴포넌트는 <h1>Hello, React</h1> 엘리먼트를 반환한다
4. ReactDOM 은 <h1>Hello, React</h1> 엘리먼트와 일치하도록 DOM 을 업데이트 한다. (변경사항만, 효율적으로.)

Props 의 이름은 사용될 Context 가 아닌 컴포넌트 자체의 관점에서 짓는 것을 권장한다.

ex. author 보다 user 와 같이 더 일반화된 형태를 사용. (상황에 따라서 달라지니, 한 가지 예시일 뿐!)

 

주의 사항

• Props 는 읽기 전용이다
• 모든 Component 는 자신의 Props 를 다룰 때 순수 함수처럼 동작해야 한다.

순수 함수란, 어떤 값이 들어와도 항상 동일한 결과를 반환하는 함수이다.

즉,  Component 는 어떤 상황에서든 Porps 를 수정해서는 안된다!

 

이것은 유연한 React 에게 존재하는 한 가지 엄격한 규칙이다.

 

Default Props

Props 또한 Default 값을 지정해줄 수 있다.

(마치 함수에서 디폴트 인자값을 지정해 주듯..)

class Welcome extends React.Component {
  static defaultProps = {
    name: "React"
  }
    
  render() {
	return <h1>Hello, {this.props.name}</h1>;
  }
}

 

Props 와 함수 Component

단순히 Props 를 가져와서 보여주기만 하는 컴포넌트는 함수 컴포넌트로 더 간단하게 작성하는 방법이 있다.

화살표 함수를 사용해서, 아래와 같이 작성해줄 수 있다.

const Welcome = ({name}) => {
  return (
    <div>
      Hello, {name}
    </div>
  );
);

---

State

• 데이터를 갖는 객체라는 점에서 props 와 유사하지만
• State 는 비공개이며,
• 컴포넌트에 의해 완전히 제어된다.

state 가 소유하고 설정한 Component 외에는 어떠한 Component 에도 접근할 수 없다.

이 때문에 state 는 종종 로컬 또는 캡슐화라고 불린다.

 

그렇기에 Component 는 자신의 state 를 자식 Component 에 props 로 전달할 수 있지만,

Component 는 자신이 받은 props 이 상위 Component 에서 state 였는지, props 였는지 또는 수동으로 입력한 것인지 알 수 없다.

 

이렇게 위에서 아래로 (부모-자식) 흐르는 데이터 흐름을 "하향식(top-down)" 또는 "단방향식" 데이터 흐름이라고 한다.

 

예를 살펴보자.

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = {comment: "Hello"};
  }
  
  render() {
    return (
      <div>
        <h1>{this.state.comment}, {this.props.name}</h1>
      </div>
    );
  }
}

 

state 는 class field 처럼 작성할 수도 있다.

class Welcome extends React.Component {
  state = {
    comment: "Hello"
  }
  
  render() {
    return (
      <div>
        <h1>{this.state.comment}, {this.props.name}</h1>
      </div>
    );
  }
}

이는 위와 동일한 결과를 낸다.

 

super(props)

Component 를 만들면서 constructor 를 작성하면 기존 클래스 생성자를 덮어쓰게 된다.

따라서 상속한 Component 가 가지고 있는 constructor 를 super 로 실행하고, 그 후에 state 를 설정해줘야 한다.

 

setState()

작성한 state 는 setState() 함수로 변경할 수 있다.

아래에 예시와, 주의 사항을 잘 봐보자.

 

병합

setState() 를 호출할 때 React는 제공한 객체를 현재 state로 병합한다.

즉 state 는 독립적인 여러 개의 변수를 포함할 수 있는데, setState() 함수 호출로 각 변수를 독립적으로 업데이트할 수 있다.

 

간단한 예시를 살펴보자. (많이 축약된 형태)

...
constructor(props){
  super(props);
  this.state = {
    name: [],
    comment: []
  };
}
...

...
this.setState({comment: "Changed!"});
...

this.setState({comment}) 는 this.state.name 에 영향을 주지 않지만, this.state.comment 는 대체된다!

 

 

주의사항

• state 는 직접 수정하지 말고, setState() 를 사용해야 한다

//Wrong
this.state.comment = 'Hello';
//Correct
this.setState({comment: 'Hello'});

this.state 를 직접 지정할 수 있는 유일한 공간은 constructor 이다.

 

• State 업데이트는 비동기적일 수 있으니, state 를 변경할 때 해당 값에 의존해서는 안된다.

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

// Correct
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

Wrong 처럼 작성하면 성공적으로 counter 값이 업데이트 될 수 있지만,

비동기적으로 state 를 업데이트 한다면, 제대로 업데이트하는 것을 실패할 수 있다.

 

---

이상으로 React 의 Component , Props , State 에 대해 알아보았다.

다음으로는 생명주기에 대해서 알아보자.

 

---

Reference

React 공식 문서

ko.reactjs.org/docs/components-and-props.html

ko.reactjs.org/docs/state-and-lifecycle.html

.