TIL | 22 - React - Props, State

렌더링(Rendering): 컴포넌트가 화면에 보여지는 작업을 말한다.

컴포넌트는 함수로 구성되어 있으며 반드시 UI요소를 return 해야한다.
여기서 UI요소는 기존에 사용하던 Html 태그와 비슷하다. 차이점은 기존에 html태그에서 쓰던 class 속성이 아니고 className을 사용한다.
컴포넌트는 태그 형식으로 사용할 수 있는데 예를 들어 <Child> 컴포넌트를 만들었다면 <Child/> 이렇게 사용할 수 있다.

부모와 자식 컴포넌트

//자식 컴포넌트 (ChildComponent.js)
function ChildComponent() {
  return <p>자식 컴포넌트</p>
}

export default ChildComponent;

//부모 컴포넌트 (ParentCompoent.js)
import ChildComponent from './ChildComponent';

function ParentComponent() {
  return (
	<div>
      <p>부모 컴포넌트</p>
    <div>
      <p>밑은 자식 컴포넌트</p>
    	<ChildComponent />
    	<ChildComponent />
    </div>
   </div>
  )
}

export default ParentComponent

Props, State

Props와 State는 데이터를 관리할 때 사용하는 개념으로 React에서 매우 중요하다.
부모 컴포넌트가 자식 컴포넌트로 값을 넘겨줄 때 Props 이용해 값을 전달할 수 있다.

State

• 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값이다.
• 화면에 보여줄 컴포넌트의 UI정보(상태)를 지니고 있는 객체

import React from 'react';

class State extends React.Component {
  constructor() {
	super();
    this.state = {
		color: 'red'; // key = 'color', value = 'red'
  };
}
  render () {
	return (
        <>
          <Child Component/>
        </>
      );
   }
export default State;
  

클래스형 컴포넌트 안에는 render 함수가 필요하고 화면에 그리고 싶은 JSX 요소는 return문 안에 들어있다.
constructor method 안에는 super() 를 호출한다.
this.state값에 컴포넌트 초기 상태값을 설정

Component는 return을 통해 UI요소를 보여주지만 컴포넌트의 UI를 업데이트 해야하는 상황이 발생할 수 있다. 예를 들어 네트워크 통신을 통해 데이터를 받아오고 그 값을 화면 컴포넌트에 새로운 값을 보여주거나, 시간이 지나면서 계속 업데이트되는 시간이나 추천 검색어가 있다. 이러한 상황에서 렌더링을 가능하게 해주는게 State이다.

반대로 Props는 기본적으로 부모에게 값을 전달받고, 따로 업데이트 하지않고 정적으로 사용한다.

State는 동적, Props는 정적이다. State가 변경되면 컴포넌트는 새롭게 업데이트 된다.

Event & setState

import React, { Component } from 'react';

class State extends Component {
  constructor() {
    super();
    this.state = {
      color: 'red',
    };
  }

  handleColor = () => {
    this.setState({
      color: 'blue'
    })
  }

  render() {
    return (
      <div>
        <h1 style={{ color: this.state.color }}>Class Component | State</h1>
        <button onClick={this.handleColor}>Click</button> 
// 버튼에 onClick 이벤트 발생하면 handleColor 함수가 실행된다. 
//이후 setState 함수가 실행되고 state의 color값이 'blue'로 변경
      </div>
    );
  }
}

export default State;