컴포넌트, Props, State

컴포넌트

컴포넌트란?

- 스스로 상태를 관리하는 캡슐화된 코드 조각

- (기술적으로) 하나의 JSX를 반환하는 함수

//App.js
export default function App() { //export default 다른 컴포넌트에서 사용하기 위함.
	return (
    	<div>
        	<h1>Hello,</h1>
            <h2>World</h2>
        </div>
    );
}
-------------------------
//index.js
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
	<App />, //App 컴포넌트
    document.getElementById('root');
);
---------------------------

 

컴포넌트 만들기

- JSX 형태로만 컴포넌트를 만드는 것 -> 함수형태로 컴포넌트를 만드는 것

  : 함수라는 scope 개념이 생기면서 고유한 로직이 들어갈 수 있고, 컴포넌트 스스로 상태를 가질 수 있음.

- import, export 문법 사용 (es6에서 모듈을 불러오고 내보내는 방법)

- 컴포넌트 이름은 PascalCase로 지어야 함 (단어의 시작 문자를 대문자)

- 컴포넌트는 의미단위로 쪼개서 파일을 분리

 

Props

Props란?
- 부모 컴포넌트에서 자식 컴포넌트로 내려주는 데이터

// 부모에서 자식으로 데이터를 내려줌.
function App() { //부모
	return (
    	<div>
        	<MyComponent value={'test'}/>
        </div>
    );
}

function MyComponent(props) { //자식
	return <div>{props.value}</div>;
}

--------------------------------------
// 컴포넌트 태그로 감싼 값이 props.children으로 전달됨.
function App() {
	return (
    	<div>
        	<MyComponent>
            	<h1>value</h1> 
            </MyComponent>
        </div>
    );
}

function MyComponent(props) {
	return <div>{props.children}</div>; //<h1>value</h1> 
}

Props 활용 팁

- 구조분해할당 구문을 잘 활용하자

- 특정 Props에 기본 값을 줄 수 있음

- Props는 읽기 전용

 

//Heading.js

export default function Heading(props) {
  if (props.type === "h2") {
    return <h2>{props.children}</h2>;
  }

  return <h1>{props.children}</h1>;
}

//index.js

import Heading from "./components/Heading";
export default function App() {
  return (
    <div>
      <Heading type="h1">test</Heading>
      <Heading type="h2">World</Heading>
    </div>
  );
}

 

State

State란
- 컴포넌트(상태를 관리) 내부에서 사용되는 변수

- State 값이 변하면 컴포넌트가 리렌더링 됨
- 렌더링 사이클에서 값이 보존됨

import { useState } from "react";

export default function App() {
  let [value, setValue] = useState(0);
  return (
    <div>
      <h1>value: {value}</h1>
      <button
        onClick={() => {
          console.log("Increase value1", value); 
          setValue(value + 1);
          console.log("Increase value2", value);
          //위 아래 콘솔 로그 모두 같은 값으로 찍힘(증가 전 값으로 나타남): 이유는 모든 랜더링이 끝난 후 한꺼번에 모아서 setState으로 변경을 해주기 때문.!!
        }}
      >
        Increase value
      </button>
  );
}

 

클래스형 컴포넌트 vs. 함수형 컴포넌트 (위)

클래스형 컴포넌트 

- 클래스 문법으로 구현한 컴포넌트

- useStatae와 같은 Hooks는 React 버전 16.8부터 사용 가능 (그 전에는 클래스형 컴포넌트만 state를 가질 수 있었음)

- 클래스의 멤버 변수로 state 정의

- render라는 멤버 함수에서 반환한 값이 화면에 그려짐

 

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    value: 0
  };

  constructor(props) {
    super(props);
    this.state = {
      value: 1
    };
  }

  resetValue() {
    this.setState({ value: 0 });
  }

  render() {
    return (
      <div>
        <h1>value: {this.state.value}</h1>
        <button
          onClick={() => {
            this.setState((state) => ({ //Component의 함수 setState : 컴포넌트에 값이 바뀌었다고 알림. -> render 함수 다시 실행
              value: state.value + 1
            }));
          }}
        >
          Increase value
        </button>
        <button
          onClick={this.resetValue.bind(this)} //bind 안쓰면 this를 button 요소를 가리켜 오류.
        >
          Reset value
        </button>
      </div>
    );
  }
}