Elice) Props & State

 

1. Props

 

Props 란?

 

기본적으로 component에 원하는 value를 넘겨줄 때 사용하며

넘길 수 있는 value는 변수, 함수, 객체, 배열 등 JS의 요소라면 상관이 없다.

주로 component의 재사용을 위해 사용된다.

 

// props의 생성

const Sayhello = (props) => {
	return <h1>Hello, {props.name}</h1>;
    }
    
// component로의 사용

const App = () => {
	return <div>
    <Sayhello name = "동탁" />
    	</div>;
        }
        
// Sayhello component안에 name tag로 동탁 value 전달

 

! 단 props의 값은 임의로 변경해서는 안된다.

 

// 안 좋은 예시 (값을 임의로 변경)

props.name = props.name + '님'

// 좋은 예시 (새로운 변수를 선언하여 그 안에 props의 값을 변경하여 넣고 component로 사용한다.)

const Sayhello = (props) => {
	const UserName = props.name + '님';
    return <h1>Hello, {UserName}</h1>;
    }

 

 

 

---

 

 

 

2. State

 

State란 Component 내에서 유동적으로 변할 수 있는 값을 저장한다.

개발자가 의도한 동작에 의해 변할 수도 있고 사용자의 입력에 따라 새로운 값으로 변경 될 수 있다. (useState 등의 hook으로 변경 가능)

State값이 변경되고 재 렌더링이 필요한 경우 React가 자동으로 계산하여 변경된 부분을 렌더링 한다.

 

import React, { useState } from 'react';
// useState를 사용할 시에는 반드시 import후 사용한다.
// import React 또한 React를 사용할 경우 반드시 import해야한다.

function Example() {
	const [count, setCount] = useState(0);
    // 여기서 count는 state, setCount는 useState를 이용하여 값을 변경 할 때 사용
    // useState(0);이란 초기의 state값이 0임을 나타낸다.
    
    return (
    	<div>
        	<p>버튼을 {count}번 눌렀습니다.</p>
            <button onClick = {() => {
            setCount(count + 1)
            }}>
            클릭
            </button>
            </div>
            );
         }
         
     // button에 onClick event로 count state를 count + 1로 setCount(값을 변경)하여
     // state값을 변경 시킨다. 이 중 onClick 이벤트에서 {}로 감싸준 이유는 이 이후로
     // javaScript표현을 사용하겠다는 뜻이다.

 

State의 값도 임의로 변경해서는 안되며, setState 함수를 이용하여 값을 변경해야 한다.

 

const App = () => {

count [user, setUser] = useState({ name : '동탁' , grade : 1 });

    setUser((current)) => {
    	const newUser = { ...current } // 초기 array를 newUser에 넣음
        newUser.grade = 2 // grade 값만 2로 변경
        return newUser;
        })
        }
        
        // 최종적으로 원래의 array를 넣은 후 array의 객체를 변경하여 state값을 변경

 

 

---

 

 

 

props와 state를 정확히 이해해야 이후 hook을 이해하기에 편리하고

또 추후 여러 기능 구현에 자주 쓰이므로, 머리에 확실히 기억하는 것이 좋다.