React State & Props

Props

Props란??

컴포넌트의 속성(property)을 의미한다.
상위 컴포넌트로부터 전달받은 값으로 변하지 않는 값이며 마치 함수의 전달인자처럼 사용할 수 있다.
이때 props로 어떤 타입의 값도 넣어 전달할 수 있도록 객체의 형태를 가지고 있다.

사용방법

1. 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의한다.

<Child text = "i'm the eldest child"/>

2. props를 이용하여 정의된 값과 속성을 전달한다.

function Child (props) {
	return (
    	
    )
}

3. 전달받은 props를 렌더링한다.

function Child (props) {
	return (
    	<div className = "child">
      		<p>{props.text}</p>
      	</div>
    )
}

props.children

컴포넌트의 태그 사이에 value를 넣어 전달하는 방법이다

<Child>I'm the eldest child</Child>

funtion Child () {
  return (
  	<div>
      <p>{props.children}</p>
    </div>
  )

State

State란??

컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값으로 state에 변화가 생기면 리액트 컴포넌를 새롭게 호출하고, 리렌더링 된다.

State hook, useState 사용법

state 생성

state를 다루는 방법 중 하나로 useState라는 함수를 제공한다.

1. import롤 useState를 불러온다.

import {useState} from 'react'

2. useState를 컴포넌트 안에서 호출한다. 일반적인 변수라면 함수가 끝날 때 사라지지만, state변수는 리액트에 의해 함수가 끝나도 사라지지 않는다.

function Child () {
  const [newState,setNewState] = useState(false);
  return ()
}

3. 사용할 때는 일반 변수처럼 호출해서 사용하면 된다.

state 갱신

state를 생성할 때 작성했던 set을 사용하면 된다.

function Child () {
  const [newState,setNewState] = useState(false);
  const handleClick = (event) => {
    setNewState(event.target.checked)
  }
  return (
  	<div>
      <input type="checkbox" checked={newState} onChange={handleClick}/>
    </div>
  )