🙋‍♀️ State

상태란? "동적"으로 변화하는 값. 계속해서 변화하는 특정 상태. 상태에 따라 각각 다른 동작을 한다.

그렇다면 react에서의 state는 어떤 의미를 갖고 있는지 살펴보자.

State : 화면에 보여줄 컴포넌트의 UI 정보(상태)

쉽게 말해 state는 기본적으로 데이터가 저장되는 곳이다.

Event & State 변경 👉 useState

상태변화 관리를 하기 위해서는 React에 있는 useState를 이용할 수 있다.

React.useState() = [우리가 담으려는 data값(currentState), 값을 바꿀 수 있는 함수]

ex)

const [counter, setCounter] = React.useState(0);
      const onClick = () => {
        //setCounter(counter + 1); //직접적으로 원하는 값 설정하는 방법
        setCounter((current) => current + 1); // 위의 방법보다 좀 더 안전 (현재값이라는 걸 보장하고 있으므로) (current value에 직접 접근해서 값 설정하는 방법)
      };
      
 <button onClick = {onClick}>Click me!</button>

button element를 click을 할 때마다 onClick 함수가 호출이 되고 (event 발생) 그때마다 setCounter라는 함수를 이용하여 상태값의 초기값이었던 0에서 1씩 더한 값으로 state 값을 update해준다.

👉 즉 setCounter라는 함수를 통해 일일히 자동으로 UI update를 해준다.

참고로, component는 자신이 갖고 있는 state가 변화할 때마다 re-redering을 한다.

🙋‍♀️ Props

properties (속성) : 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체, 바뀌지 않는 값

prop으로 전달받을 수 있는 데이터 타입은 다양하다. 불리언, 함수 등도 가능하다!
⭐️ 부모 component에서 props 넣어줄 때 string형태는 “”로, 변수나 함수등은 {}안에넣어서 보내줄 것!

props는 컴포넌트의 재사용성 가능하게 해준다는 장점이 있다.

Event & Props

props를 통해 event handler 넘겨주기

ex)

// 자식 Component
const Btn = (props) => {
  
  console.log(props) // {text: 'Save Changes'} {text: 'Continue'}

  return
  <button>
  {props.text} 
  </button>
}
// 부모 Component
const App = () =>{
return <>
<Btn text="Save Changes" /> 
<Btn text="Continue" /> 
</>

더 간편하게 비구조화 할당을 통해 props을 넘겨받을 수 있다.

ex) {text, onClick} = props

const Btn({text, onClick}) => {
  
  console.log(props) // {text: 'Save Changes'} {text: 'Continue'}

  return
  <button onClick = {onClick}>
  {text} 
  </button>
}

const App = () => {
return <>
 <Btn text="Save Changes" onClick ={changeValue} />  
<Btn text="Continue" />  
</> }

⚠️ 유의할 점!
onClick eventlistener 아니고 prop임! html element 안에 onClick을 넣어야 eventlistener가 된다 유의할 것! 꼭 prop내에 넣어주고 html element 안에도 넣어주기!