리액트 컴포넌트와 state, props

1. 컴포넌트

재사용 가능한 UI 단위(=레고 블럭).

컴포넌트는 다른 컴포넌트를 자식으로 가질 수 있다.

 

컴포넌트를 사용하는 이유

1. 코드 재활용 용이

2. 유지보수가 쉬움

3. 페이지 구성 파악 쉬움

 

컴포넌트 생성 방식

- 클래스 컴포넌트 : 초기에 사용하던 방식. 함수형보다 복잡한 편

- 함수 컴포넌트 : 초기에 state를 관리할 수 없어서 잘 사용하지 않았으나,

16.8 버전에서 hooks가 추가되며 state를 관리할 수 있게 되며 많이 사용하게 됨.

2.  props(=properties)

컴포넌트가 갖고 있는 속성값.

읽기 전용 값이다. 

부모 컴포넌트에서 props를 전달받아 원하는 컴포넌트에서 사용한다. (함수의 파라미터와 비슷)

 

예시1)

function Child(props) {
  console.log(props); // {titleColor: 'red'}
  return (
    <div>
      <h1 style={{ color: props.titleColor }}>Child Component</h1>
    </div>
  );
}

function Parent() {
  return (
    <div>
      <h1>Parent</h1>
      <Child titleColor="red" />
    </div>
  );
}

 

예시2) props로 자식 컴포넌트에게 이벤트 핸들러 전달하기

function Child(props) {
  return (
    <div>
      <h1 style={{ color: props.titleColor }}>Child Component</h1>
      <button onClick={props.changeColor}>Click</button>
    </div>
  );
}

function Signup() {
  const [color, setColor] = useState("red");

  return (
    <div>
      <h1>Parent</h1>
      <Child titleColor={color} changeColor={() => setColor("blue")} />
    </div>
  );
}

3.  state

컴포넌트가 갖고 있는 상태값. (=화면에 보여줄 컴포넌트의 정보)

업데이트 할 수 있는 값이다.

컴포넌트 내에서 정의하고 사용한다.

 

예시 1)

import React, { useState } from "react";

function Greet() {
// useState 함수는 [상태값(state)을 저장하는 변수, 상태값을 갱신하는 함수]를 배열로 반환한다.
// useState에 인자로 넣은 값이 상태값(count)의 초깃값이 된다.
  const [color, setColor] = useState('blue'); 

  return (
    <div>
      <h1 style={{ color: color }} >Hello</h1>
    </div>
  );
}

export default Greet;

예시 2) Event

import React, { useState } from "react";

function Greet() {
  let [color, setColor] = useState("red");

  return (
    <div>
      <h1 style={{ color: color }}>hello</h1>
      <button onClick={() => setColor("blue")}>Click</button> 
      // 버튼 클릭 시 color 변수의 값을 blue로 바꿈
    </div>
  );
}

export default Greet;