state, props

state

state는 컴포넌트 내부에서 선언하여 내부에서 상테를 바꿀 수 있는 것이다. 즉 react에서 선언하고 사용할 수 있는 변수 같은 것이다.

fuction home () {
  
  	const[state, setState] = useState("")
    
    const onChange = (e) => {
    	setState(e.target.value)
    }  
	return(
    	<div>
      		<input onChange={onChange} />
        </div>
    )
}

useState라는 Hook을 통해서 state를 설정해 줄 수 있다.
구조분해할당으로 state라는 상태값과 setState라는 state상태값을 변경해 줄 수 있는 함수를 할당하고 useState에는 초기값을 정해준다.
그리고 onChange 이벤트를 통해서 setState실행하여 state값을 변경해준다.
이렇게 변경된 값을 가지고 컴포넌트에사 활용을 할 수 있다.

---

props

props는 부모 컨포넌트의 데이터를 자식컴포넌트에게 넘겨 줄 수 있게 헤주는 것이다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

welcome이라는 컴포넌트의 부모요소에게 받은 props를 가지고 표현식을 통해서 나타낼 수 있다. 이렇게 되면 props안에 담겨 있는 데이터중 name이라는 데이터를 사용할 수 있는 것이다.

function Hi() {
  
  	const name = "철수"
  
	return(
    	<Welcome name={name}/>
    )
}

부모 컴포넌트를 보면 named이라는 상수에 철수라는 값을 담아서 name으로 props를 전잘하고 있다. 이때 name={name}에서 앞에 name 은 갹체에 key가 되고 {}안에 name은 value가 되서 props라는 객체안에 담기게 되서 자식컴포넌트에게 전달이 된다.