props와 state 알아보기 [리액트를 다루는 기술 : 3장 컴포넌트]

props

props는
컴포넌트 속성을 설정할 때 사용하는 요소입니다.

props 값은 해당 컴포넌트를 불러와
사용하는 부모 컴포넌트에서 설정할 수 있습니다.

props 값은 읽기 전용이므로
바꾸려면 부모 컴포넌트에서 바꿔줘야 합니다.

props를 렌더링하기 위해서는
JSX 내부에서 { } 기호로 감싸주면 됩니다.

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

App 컴포넌트에서 MyComponent의 props 값을 지정해 보겠습니다.

// App.js
import MyComponent from './MyComponent';

const App = () => {
  return <MyComponent name = "리액트">자바스크립트 라이브러리</MyComponent>;
}

export default App;

// MyComponent.js
const MyComponent = props => {
  return (
  	<div>
    	저는 {props.name}입니다. <br />
  		저는 {props.children}입니다.
    </div>
  );
}

export default MyComponent;

저는 리액트입니다.
저는 자바스크립트 라이브러리입니다.

다음과 같이 App.js에서 MyComponent.js로
name과 children 속성을 props로 전달할 수 있습니다.

구조분해할당으로 props 값 받아오기

// MyComponent.js
const MyComponent = props => {
  const { name, children } = props
  return (
  	<div>
    	저는 {name}입니다. <br />
  		저는 {children}입니다.
    </div>
  );
}

export default MyComponent;

저는 리액트입니다.
저는 자바스크립트 라이브러리입니다.

다음과 같이 구조분해할당으로 props 값을 받아오면
중복 코드를 제거할 수 있습니다.

defaultProps와 propTypes 지정하기

import PropTypes from 'prop-types';

const MyComponent = (props) => {
    const { name, children } = props

    return (
        <div>
            저는 {name}입니다. <br />
            저는 {children}입니다.
        </div>
    )
}

MyComponent.defaultProps = {
    name: '기본 이름'
}

MyComponent.propTypes = {
    name: PropTypes.string.isRequired
}

export default MyComponent

저는 리액트입니다.
저는 자바스크립트 라이브러리입니다.

다음과 같이 defualtProps로 props.name이 없을 때 값을 설정할 수 있고,
prop-types로 props의 타입을 지정할 수 있습니다.
만약 props.name의 타입이 string이 아닐 경우, console 창으로 경고를 띄울 수 있습니다.

state

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

useState를 활용하여 버튼을 눌렀을 때 message가 바뀌는 Say 컴포넌트를 만들어보겠습니다.

// App.js
import Say from "./components/Say"

function App() {
  return <Say/>
}

export default App

// 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에서 setMessage 변수를 통해 message의 값을
버튼을 눌렀을 때마다 바꿔줄 수 있습니다.