[React] component / props / state

 

 

1.  컴포넌트 종류

함수형 컴포넌트

import React from 'react';

funcion App() {
return ...
}

export default App;

 

클래스형 컴포넌트

import React, { Component } from 'react';

class App extends Component {
   render() {
   ... }
}

export default App;

 

🧐 두 방식의 차이점
함수형 컴포넌트는 메모리 자원, 결과물의 파일 크기 등이 클래스형 컴포넌트보다 작다는 장점이 있다.
But, 함수형 컴포넌트는 state와 라이플 사이클 API 사용이 불가하다 -> React v.16.8 이후 Hooks 기능으로 사용 가능해짐

 

 

2. 코드 작성하기

함수형 컴포넌트

function 키워드 대신 () => {} 화살표 함수 문법 사용

import React from 'react';

const MyComponent () => {
   return <p> Hi </p>
};

export default MyComponent;

 

🧐 일반 함수와 화살표 함수의 차이점
일반 함수: 자신이 종속된 객체를 this로 가리킴
화살표 함수: 자신이 종속된 인스턴스를 this로 가리킴

화살표 함수는 값을 연산해서 바로 반환해야 할 때 사용하면 가독성을 높일 수 있다
function twice(value) {
   return value * 2;
}

const triple = (value) => value * 3;

 

 

3. props

props란 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다.

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

 

JSX 내부에서 props 랜더링

name이라는 props 렌더링
props 값은 컴포넌트 함수의 파라미터로 받아와서 사용할 수 있다

import React from 'react';

const MyComponent = (props) => {
   return <div> Hi, I'm {props.name} </div>
};

export default MyComponent;

 

 

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

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

const App = () => {
   return <MyComponent name="React" />;
};

export default App;

 

 

props 기본값 설정
: defaultProps

props 값을 따로 지정하지 않았을 때 보여줄 기본값 설정

import React from 'react';

const MyComponent = (props) => {
   return <div> Hi, I'm {props.name} </div>
};

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

export default MyComponent;

 

 

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

props 값을 따로 지정하지 않았을 때 보여줄 기본값 설정

 

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

const App = () => {
   return <MyComponent>안녕하시렵니까</MyComponent>;
};

export default App;

import React from 'react';

const MyComponent = (props) => {
   return 
      <div> 
         Hi, I'm {props.name} <br />
         children 값은 {props.children} 입니다.
      </div>
};

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

export default MyComponent;

 

 

비구조화 할당 문법을 통해 props 내부 값 추출하기

객체에서 값을 추출하는 문법

 

const { name, children } = props; 와 같은 문장을 추가하여 props 키워드를 일일이 쓰지 않아도 된다.

import React from 'react';

const MyComponent = (props) => {
   const { name, children } = props;
   return 
      <div> 
         Hi, I'm {name} <br />
         children 값은 {children} 입니다.
      </div>
};

export default MyComponent;

 

함수의 파라미터 부분에서 비구조화 할당 문법 사용하기

import React from 'react';

const MyComponent = ({name, children}) => {
  return 
      <div> 
         Hi, I'm {name} <br />
         children 값은 {children} 입니다.
      </div>
};

export default MyComponent;

 

 

propTypes를 통한 props 검증

컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 시 propTypes 사용

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

const MyComponent = ({name, children}) => {
  return 
      <div> 
         Hi, I'm {name} <br />
         children 값은 {children} 입니다.
      </div>
};

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

export default MyComponent;

 

 

GitHub - facebook/prop-types: Runtime type checking for React props and similar objects

 

 

 

4. state

state란 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.

 

🧐 props와의 차이점
props는 컴포넌트가 사용될 때 부모 컴포넌트가 설정하는 값이기 때문에, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다. props를 바꾸려면 부모 컴포넌트에서 바꿀 수 있다.

 

클래스형 컴포넌트의 state

import React, { Component } from "react";

class Counter extends Component {
  // 생성자
  constructor(props) {
    super(props);   // 생성자 작성 시 필수로 호출!
    // state의 초깃값 설정하기
    this.state = {
      number: 0,
    };
  }

  render() {
    const { number } = this.state;  // 현재 state 조회: this.state
    return (
      <div>
        <h1> {number} </h1>
        {/* button 태그 안에 onClick 값을 props로 넣어서 버튼 클릭 시 호출시킬 함수 설정 */}
        <button
          onClick={() => {
            this.setState({ number: number + 1 });  // setState(): state값 변경
          }}
        >
          +1
        </button>
      </div>
    );
  }
}

export default Counter;

실행 결과

 

👍 state를 constructor에서 꺼내는 방법
class Counter extends Component {
   state = {
      number: 0,
      fixedNumber: 0
   };

 

 

this.setState가 끝난 후 특정 작업 실행하기

setState의 두 번째 파라미터로 콜백 함수를 등록하여 작업을 처리할 수 있다

<button
          onClick={() => {
            this.setState(
              {
                number: number + 1,
              },
              () => {
                console.log("방금 setState가 호출되었습니다");
              }
            ); // setState(): state값 변경
          }}
        >

 

 

 

함수형 컴포넌트의 state

👍 배열 비구조화 할당
배열 안에 들어있는 값을 쉽게 추출할 수 있도록 해주는 문법

const array = [1, 2];
const one = array[0];
const two = array[1];

const array = [1, 2];
const [one, two] = array;

 

 

import React from "react";
import { 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;