Props와 State

목차

1. Props
2. State
3. 요약

---

Props

• properties의 줄임말로, 컴포넌트 속성을 설정할 때 사용하는 요소이다.

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

  • 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값.
  • 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다.
  • props를 변경하려면 부모컴포넌트에서 바꾸어 줘야한다.

• props 값은 컴포넌트 함수의 파라미터로 받아 와서 사용할 수 있다.

Examples.js (클래스형 컴포넌트 이용)

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Examples extends Component {
  // 클래스 내부에서 defaultProps와 propTypes 지정하는 방법.
  static defaultProps = {
    name: '기본 이름',
  };

  static propTypes = {
    name: PropTypes.string,
    favoriteNumber: PropTypes.number.isRequired,
  };
  render() {
    const { name, children, favoriteNumber } = this.props;
    return (
      <div>
        안녕하세요, 제 이름은 {name} 입니다. <br />
        children 값은 {children} 입니다. <br />
        제가 좋아하는 숫자는 {favoriteNumber} 입니다.
      </div>
    );
  }
}
//  클래스 밖에서 defaultProps 지정하는 방법.
// 
// Examples.defaultProps = {
//   name: '기본 이름',
// };

// Examples.propTypes = {
//   name: PropTypes.string,
//   favoriteNumber: PropTypes.number.isRequired,
// };
export default Examples;

Example.js (함수 컴포넌트)

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

const Example = ({ name, children, favoriteNumber }) => { 
  return (
    <div>
      안녕하세요, 제 이름은 {name} 입니다. <br />
      children 값은 {children} 입니다. <br />
      제가 좋아하는 숫자는 {favoriteNumber} 입니다.
    </div>
  );
};

Example.defaultProps = {
  name: '기본 이름',
};

Example.propTypes = {
  name: PropTypes.string,
  favoriteNumber: PropTypes.number.isRequired,
};

export default Example;

• defaultProps : props 값을 따로 지정하지 않았을 때 보여 줄 기본값 설정하는 녀석
• children : 컴포넌트 태그 사이의 내용을 보여주는 props

App.js

import React from 'react';
import Example from './Example';

const App = () => {
	return 
  	<>
       <MyComponent name="React" favoriteNumber={3}>
        리액트
      </MyComponent>
      <hr />
      <MyComponents name="react" favoriteNumber={7}>
        리엑트
      </MyComponents>
  	</>
};

export default App;

• 비구조화 할당

  예를 들어, 다음과 같이 props 값을 조회할 때마다, props.name, props.children처럼 props. 이라는 키워드를 붙여주고 있다.

import React from 'react';

const Example = props => {
	return ( 
		<div>
			안녕하세요 {props.name} 입니다. <br/>
			children 값은 {props.children} 입니다. 
		</div>
	)
}

export default Example;

이를 더 편하게 하기위해서 ES6의 비구조화 할당 문법을 사용해서 내부 값을 바로 추출할 수 있다.

import React from 'react';

const Example = props => {
	const {name, children} = props;
	return (
		<div>
			안녕하세요 {name} 입니다. <br/>
			children 값은 {children} 입니다. 
		</div>
	)
}

export default Example;

이를 더욱 간소화 한다면 다음과 같이 나타낼 수 있다.

import React from 'react';

const Example = ({name, children}) => {
	return (
		<div>
			안녕하세요 {name} 입니다. <br/>
			children 값은 {children} 입니다. 
		</div>
	)
}

export default Example;

이처럼, 객체에서 값을 추출하는 문법을 비구조화 할당 (destructuring assignment) 라고 한다.

함수의 파라미터 부분에서도 사용가능하며 함수의 파라미터가 객체일 경우, 그 값을 바로 비구조화 해서 사용할 수 있다.

• Props 검증

  컴포넌트의 필수 props를 지정하거나, props 타입을 지정할 때는 propTypes를 사용한다.

  우선 모듈 prop-types를 설치해주자.

  $ yarn add prop-types

  다음과 같이 설정해주면, name의 값은 무조건 문자혈 형태로 전달되야 한다.

  • propTypes를 import 해주고 컴포넌트의 propTypes를 지정해보자.

  import React from 'react';
  import PropTypes from 'prop-types';
  
  const Example = ({name, children}) => {
  	return (...); // 생략
  }
  
  Example.propTypes = {
  	name: PropTypes.string
  };
  
  export default Example;

  propTypes를 지정하지 않았을 때 경고메세지를 주려면 propTypes 뒤에 isRequired를 붙여주면 된다.

  import React from 'react';
  import PropTypes from 'prop-types';
  
  const Example = ({name, children, favNumber}) => {
  	return 
  	<div>
  		(...) // 생략
  		제가 좋아하는 숫자는 {favNumber} 입니다.
  	</div>
  }
  
  Example.propTypes = {
  	name: PropTypes.string
  	favNumber: PropTypes.number.isRequired
  };
  
  export default Example;

  name에 문자열 이외의 타입이 전달되거나 favNumber에 propType를 지정하지 않으면 콘솔에서 에러를 발생시킨다.

  클래스형 컴포넌트에서의 활용은 생략하도록 하겠다.

  • PropTypes와 defaultProps 같은 경우는 컴포넌트의 필수 사항은 아니지만, 대규모 프로젝트 진행 시 협업을 한다면 해당 컴포넌트에 어떤 props가 필요한 지 명시할 수 있어 효율적일 것이다 !

---

State

• state는 컴포넌트 내부에서 바뀔수 있는 값을 의미한다.
• state는 두가지의 종류가 있다.
  1. 클래스형 컴포넌트가 가지는 state
  2. 함수형 컴포넌트에서 useState 함수를 통해 사용하는 state

• 클래스형 컴포넌트가 가지는 state

  import React, { Component } from 'react';
  
  class Counter extends Component {
       constructor(props) {
       super(props);
         
       this.state = {
         number: 0,
         fixedNumber: 0,
       };
     }

  다음과 같이 constructor을 사용해서 state의 초기값을 지정해준다.

  • 컴포넌트에 state를 설정할 때, constructor 메서드를 통해 설정해준다.
  • constructor를 작성할 때 반드시 super(props)를 호출해주자.
    • super(props) 함수가 호출될 때, 현재 클래스형 컴포넌트인 Counter 컴포넌트가, 상속받고 있는 리액트의 컴포넌트 클래스가 지닌 생성자 함수를 호출해준다.
  • 컴포넌트의 state는 객체형식이다.
  • state 객체 안에는 여러값이 있을 수 있다.

  render() {
      const { number, fixedNumber } = this.state; // state 조회 시 this.state로 조회한다.
      return (
        <div>
          <h1>{number}</h1>
          <h2>바뀌지 않는 값 : {fixedNumber}</h2>
          <button
            // onClick을 통해 버튼이 클릭되었을 때 호출할 함수를 지정한다.
            // onClick은 버튼 안에 props로 들어간다. 이것은 버튼이 클릭될 때 호출시킬 함수를 설정해준다. => 이것을 이벤트 설정이라고 한다.
            onClick={() => {
              // 이벤트 설정은 화살표 함수문법으로 넣어줘야 한다.
              // this.setState를 사용해서 state에 새로운 값을 넣을 수 있다. (state값을 바꿀 수 있게 해준다, state 값 업데이트)
              this.setState({ number: number + 1 });
              this.setState({ number: this.state.number + 1 });
            }}>
            + 1
          </button>
        </div>
      );
    }

  render 함수에서 현재 state를 조회하고, 이벤트를 설정해주자.

  • 현재 state 조회 시 this.state 조회
  • button 내부 onClick이라는 값을 props로 넣어 준다.
    • 버튼이 클릭될 때 호출시킬 함수를 설정할 수 있게 해준다. => 이벤트 설정
    • 이벤트 설정할 함수를 넣어줄때는 화살표 함수 문법을 사용한다.
  • onClick 함수 내부의 this.setState 함수가 state 값을 바꿀수 있게 해준다.
  • this.setState 함수는 인자로 전달된 객체 내부에 들어있는 값만 바꾸어 준다.

• 다음과 같이 state를 constructor에서 꺼내서 state 초기값 설정할 수 있다.

  import React, {Component} from 'react';
  
  class Counter extends Component{
  	state ={
  		number: 0,
  		fixedNumber: 0
  	};
  	render() {
  		const {number, fixedNumber} = this.state;
  		return ~~;
  	}
  }
  
  export default Counter;

• this.setState 사용 시, 객체 대신 함수를 인자로 넣어주는 방식

  • this.setState의 인자로 함수를 넣어 줄 때 다음과같이 작성한다.

  this.setState ((prevState, props) => {
  	return {
  		// 업데이트 내용
  	}
  });

  • prevState : 기존 상태
  • props : 현재 지니고 있는 props (만약 업데이트과정에서 필요하지 않다면 생략 가능)

• 화살표 함수에서 값을 바로 반환하고 싶을 때는 { }을 생략할 수 있다.

  this.setState(prevState => ({
  	number: prevState.number + 1
  }));

• this.setState 후에 특정 작업 실행

  this.setState(
  	{
  		number: number + 1
  	},
  	() => {
  		console.log('setState 호출되었다.');
  	}
  )

  • setState 를 통해 값을 업데이트 하고 난 뒤, 특정 작업을 하고싶을 때 setState의 두번째 파라미터로 callback 함수를 등록해서 처리할 수 있다.

• 함수형 컴포넌트에서 state 사용하기

  • 함수형 컴포넌트에서는 state를 사용할 수 없었지만, 16.8버전 이후부터 useState 함수를 사용해서 state를 사용할 수 있게 되었다.
  • Hooks를 사용하면 된다.

  배열 비구조화 할당

  • 배열 안에 들어있는 값을 쉽게 추출할 수 있는 문법

  const arr = [1, 2];
  const first = arr[0];
  const second = arr[1];

  다음과 같이 배열 arr에 있는 값을 first, second에 담아준다.

  이를 쉽게 추출하기 위해 배열 비구조화 할당을 사용해보자.

  const arr = [1, 2];
  const [first, second] = arr;

  깔-끔

useState 사용

import React, {useState} from 'react';

const Example = () => {
	const[msg, setMsg] = useState('');
	const onClickEnter = () => setMsg('hi !');
	const onClickLeave = () => setMsg('bye ~');
	
	return (
		<div>
      <button onClick={onClickEnter}>enter</button>
      <button onClick={onClickLeave}>leave</button>
      <h2>{msg}</h2>
		</div>
	)
}

export default Example;

• useState 함수의 인자에는 상태의 초기값을 넣어준다.
• 함수를 호출하면 [msg, setMsg] 배열이 반환된다.
  • 첫 번째 원소 msg는 현재 상태
  • 두 번째 원소 setMsg는 상태를 바꾸어주는 함수 = setter 함수
• 배열 비구조화 할당을 통해서 자유롭게 이름을 정해줄 수 있다.

• State 사용 시 주의사항

  • state 값을 변경할 때는 setState or useState를 통해 전달받은 setter 함수를 사용해야 한다.

  • 배열 혹은 객체를 업데이트 할 때

    • 배열 혹은 객체의 사본을 만든다
    • 그 사본에 값을 업데이트 한다
    • 사본의 상태를 setState 또는 setter 함수를 통해 업데이트 한다.

    // 객체
    const obj = {a: 1, b: 2, c: 3};
    const afterObj = {...obj, b: 2}; // 사본 생성 후 b값만 덮어쓴다. 
    // ... 은 spread 연산자이며 객체에 대한 사본을 만들 때 사용한다.
    
    // 배열
    const arr = [
    	{id: 1, value: true},
    	{id: 2, value: false},
    	{id: 3, value: false},
    ];
    
    let nextArr = arr.concat({id:4}); // 새 항목 추가
    nextArr.filter(item => item.id != = 2); // id가 2인 항목 제거
    nextArr.map(item => (item.id === 1 ? {...item, value: false} : item));
    // id가 1인 항목의 value를 false로 설정.

---

요약

• props는 부모 컴포넌트가 설정한다.
• state는 컴포넌트 자체적으로 지닌 값으로 컴포넌트 내부에서 값을 업데이트 할 수 있다.
• props를 사용한다고 해서 값이 무조건 고정적인 것은 아니다.
  • 부모 컴포넌트의 state -> 자식 컴포넌트의 props로 전달
  • 자식 컴포넌트에서 이벤트 발생 시, 부모 컴포넌트의 메소드 호출
  • 이런 방식으로 props를 유동적으로 사용할 수 있다.
• 새로운 컴포넌트를 만들 때, useState를 사용하자.
• Hooks 사용이 주요 컴포넌트 개발 방식이 될것이다..!

---

출처

• 리액트를 다루는 기술 - 김민준