[React] 컴포넌트 이해하기

컴포넌트를 선언하는 방식

함수 컴포넌트
클래스형 컴포넌트

클래스형 컴포넌트 특징

render 함수가 있어야 하고, 그 안에서 보여주어야 할 JSX를 반환해야 함
tate 기능 및 라이프 사이클 기능을 사용할 수 있음
임의 메서드를 정의할 수 있음

함수 컴포넌트 장점

클래스형 컴포넌트보다 선언하기 편함
메모리 자원도 덜 사용
프로젝트를 완성하여 빌드한 후 배포할 때, 결과물의 파일 크기가 더 작음

함수 컴포넌트 단점

state와 라이프사이클 API 사용 불가능 -> Hooks 기능이 도입되면서 해결

Props

Props : properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소

props 값 : 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있음

컴포넌트를 사용할 때 props 값 지정하기

컴포넌트를 사용하는 부모 컴포넌트에서 props값을 지정할 수 있다.

App.js 에서 사용하는 NewComponent 에 props 값을 지정해보자.

//App.js
import React from 'react';
import NewComponent from './NewComponent';

const App = () => {
  return (
    <div>
      <NewComponent name="Joo" />
    </div>
  );
};

export default App;

이렇게 부모 컴포넌트에서 NewComponent에 지정한 name이라는 속성은 NewComponent에서 props를 파라미터로 받아서 사용할 수 있다. (JSX 내부에서 props 렌더링)

//NewComponent.js
import React from 'react';

const NewComponent = props => {
  return <div>Hello, React Component! I'm {props.name}</div>;
};

export default NewComponent;

props 기본값 설정 : defaultProps

만약, 해당 컴포넌트를 사용하는 부모 컴포넌트에서 props 값을 지정하지 않았을 경우에 defaultProps으로 기본 값을 설정할 수 있음.

NewComponent.defaultProps = {
  name: 'default',
};

태그 사이의 내용을 보여주는 children

children : props는 컴포넌트 태그 사이의 내용을 보여줌

//App.js
import React from 'react';
import NewComponent from './NewComponent';

const App = () => {
  return <NewComponent> React </NewComponent>;
};

export default App;

위 코드에서 NewComponent 태그 사이에 작성한 React 라는 문자열을 NewComponent 내부에서 보여주려면 props.children 를 사용하면 된다.

//NewComponent.js
import React from 'react';

const NewComponent = props => {
  return (
    <div>
      Hello, React Component! My name is {props.name}
      <br/>
      Children is {props.children}
    </div>
  );
};

NewComponent.defaultProps = {
  name: 'default',
};

export default NewComponent;

함수의 파라미터 부분에서 바로 비구조화 할당 문법을 사용할 수도 있다.

//NewComponent.js
import React from 'react';

const NewComponent = ({ name, children }) => {
  return (
    <div>
      Hello, React Component! My name is {name}
      <br />
      Children is {children}
    </div>
  );
};

NewComponent.defaultProps = {
  name: 'default',
};

export default NewComponent;

propTypes 를 통한 props 검증

컴포넌트의 필수 props 지정 또는 props 타입 지정을 위해 propTypes 를 사용

import React from 'react';
import PropTypes from 'prop-types';

const NewComponent = ({ name, children }) => {
  return (
    <div>
      Hello, React Component! My name is {name}
      <br />
      Children is {children}
    </div>
  );
};

NewComponent.defaultProps = {
  name: 'default name',
};

NewComponent.propTypes = {
  name: PropTypes.string
};

export default NewComponent;

다음의 정의는 name 속성이 반드시 문자열 형태로 전달되어야한다는 것을 의미

state

state : 컴포넌트 내부에서 바뀔 수 있는 값.

props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이고, 컴포넌트 자신은 props를 읽기전용으로 사용할 수 있음.

클래스형 컴포넌트가 가지고 있는 state
함수형 컴포넌트에서 useState 함수를 통해 사용하는 state

함수형 컴포넌트에서 `useState` 사용하기

리액트 16.8이후로는 useState 함수로 함수형 컴포넌트에서도 state 를 사용할 수 있음. 이 과정에서 Hooks라는 것을 사용함.

//Say.js
import React, { useState } from 'react';

const Say = () => {
  const [message, setMessage] = useState('');
  const onClickEnter = () => setMessage('안녕하세요!');
  const onClickLeave = () => setMessage('안녕히가세요!');

  return (
    <div>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>
      <h1>{message}</h1>
    </div>
  );
};

export default Say;

코드 첫 줄을 보면 useState 를 import 한다. 그리고 useState 함수를 사용하는데, 함수의 인자에는 상태의 초깃값을 넣어줄 수 있다. 클래스형 컴포넌트에서의 state 초깃값은 객체 형태로 넣어주어야 하지만, useState 에서 값의 형태는 자유이다.

함수를 호출하면 배열이 반환되는데, 배열의 첫 번째 원소는 현재 상태, 두 번째 원소는 상태를 바꾸어 주는 세터(Setter) 함수이다. 이를 비구조화 할당으로 message , setMessage 에 할당해 주고 있다.

onClickEnter 함수는 '안녕하세요!' 라는 메시지로 state 를 세팅하는 함수이고, onClickLeave 함수는 '안녕히가세요!' 라는 메시지로 state 를 세팅하는 함수이다.

useState : 한 컴포넌트에서 여러 번 사용할 수 있음. 색을 관리하는 color 를 state 에 추가해보자.

//Say.js
import React, { useState } from 'react';

const Say = () => {
  const [message, setMessage] = useState('');
  const onClickEnter = () => setMessage('안녕하세요!');
  const onClickLeave = () => setMessage('안녕히가세요!');
  const [color, setColor] = useState('black');

  return (
    <div>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>
      <h1>{message}</h1>
            <button style={{ color: 'red' }} onClick={() => setColor('red')}>
        Red
      </button>
      <button style={{ color: 'green' }} onClick={() => setColor('green')}>
        Green
      </button>
      <button style={{ color: 'blue' }} onClick={() => setColor('blue')}>
        Blue
      </button>
    </div>
  );
};

export default Say;

정리

props 와 state 모두 컴포넌트에서 사용하거나 렌더링할 데이터를 담고 있지만, props 는 부모 컴포넌트가 설정하고, state 는 컴포넌트 내부에서 값을 업데이트한다.

props 를 사용한다고 값이 무조건 고정적이지 않은데, 부모 컴포넌트의 state 를 자식 컴포넌트의 props 로 전달하고, 자식 컴포넌트에서 특정 이벤트가 발생할 때 부모 컴포넌트의 메소드를 호출한다면, props 도 유동적으로 사용할 수 있다.

이 글은 김민준 님의 리액트를 다루는 기술을 읽고 정리한 내용입니다.

저작자표시