리액트(React) - 속성(Props), 상태(State)

속성(Propertys == Props)

속성(Props)은 하위 컴포넌트(Component)에 전달된 값을 그대로 표현할 때 사용합니다.

• 같은 컴포넌트지만 내용이 다른 양식(Template)을 만들 때 사용합니다.
• 속성 값이 달라져도 컴포넌트를 수정할 필요가 없습니다.
• 속성은 읽기 전용(Read Only)으로 속성 값이 변하지 않습니다.

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Profile Name={"이나"} Email={"contact@dev.com"} PhoneNumber={"010-1234-1234"}></Profile>
      </header>
    </div>
  );
}

알맞은 DOM 태그에 중괄호(JSX 또는 TSX 문법)를 넣어 지정 된 속성 값을 표시합니다.

function Profile(Props) {
  return (
    <div>
    	<h2>{Props.Name}</h2>
        <p>{Props.Email}</p>
        <p>{Props.PhoneName}</p>
    </div>
  );
}

상태(State)

상태(State)는 컴포넌트에서 관리되고 상태가 변경 될 때마다 렌더링이 필요할 때 사용합니다.

• 상태(State)는 읽기 / 쓰기 모두 가능합니다.
• 상태(State)는 객체를 보관하며 사용자 작업, 이벤트에 따라 변경되고 렌더링 됩니다.

import { useState } from 'react';

function App(){
	// 초기값 설정
    // 읽을 때는 'State' 수정 할 때는 'setState' 사용합니다.
	const [Switch, setSwitch] = useState("");
	
    const handleTrunOn = () => {
    	setSwitch(Switch = "On");
    }
    
    const handleTrunOff = () => {
    	setSwitch(Switch = "Off");
    }
    
    return(
    	<div>
         <h1>Switch {Switch}!</h1>
       
         <button
            id="SwitchOn"
            onClick={handleTrunOn}
         >
            
         <button
            id="SwitchOff"
            onClick={handleTrunOff}
         >
        </div>
    )
}

	상태(State)	속성(Props)
사용 조건	컨포넌트에서 렌더링 할 데이터 저장	하위 컴포넌트에 데이터를 전달
수정 가능성	읽기 / 쓰기 모두 가능	읽기만 가능
대상	컴포넌트 State 수정	하위 컴포넌트 Props 수정