[React] State, Props

State, Props

1. Props

Props는 컴포넌트의 속성을 의미한다. 부모 컴포넌트에서 받은 전달받은 속성이다.

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child />
    </div>
  );
};

function Child() {
  return (
    <div className="child">I'm the eldest child</div>
  );
};

Props 속성을 이용해 Child컴포넌트에 'I'm the eldest child'와 같은 값으로 바꿔주려면

<Child text={"I'm the eldest child"} />

• 부모 컴포넌트에 자식 컴포넌트로 들어가있는 Child 컴포넌트 이름 옆에
  속성을 선언하고 "I'm the eldest child" 문자열을 할당한다. 주의해야될 점은 중괄호{} 묶어줘야 된다.

그리고 Chile컴포넌트에 props라는 매개변수를 넣어준 뒤 dot notation을 이용해 props의 속성값에 접근을 한다. 매개변수에 꼭 props를 넣어줘야되는것은 아니지만 개발자들 사이에서 관습적인 작명법이기 때문에 지켜주는게 좋을것 같다.

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

Child컴포넌트에 또 다른 문자열을 추가할 수도 있다.

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child text={"I'm the eldest child"} />
      <Child text={"Hello World!"} />
    </div>
  );
}

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

• Hello World! 라는 문자열도 Child컴포넌트에 다른 수정 없이 바로 만들어 지는것을 볼수있다.

2. State

useState를 컴포넌트 안에서 호출 하는것은 state라는 변수를 선언하는 것과 같고 변수 이름은 원하는 이름으로 짓는다. 일반적인 변수는 끝날 때 사라지지만 state변수는 React에 의해 함수가 끝나도 사라지지 않는다.

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false); 

  // 위의 코드를 풀어쓰면 아래와 같다.
  const stateHookArray = useState(false); 
  const isChecked = stateHookArray[0];
  const setIsChecked = stateHookArray[1];
}

• isChecked : state를 저장하는 변수
• setIsChecked : state isChecked를 변경하는 함수
• useState : state hook
• false : state 초기값

체크박스 예시로 input 속성에 onChage를 이용해 사용자가 체크박스 클릭 했을때 발생하는 이벤트 값이 onChage속성에 넣어준 handleChecked에 전달이 되고 isChecked값을 갱신 시켜주는 setIsChecked값을 호출하게 된다. 이 결과에 따라 React는 새로운 isChecked변수를 CheckboxExample컴포넌트에 넘겨 다시 렌더링 한다.

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);

  const handleChecked = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />
    
    // 삼항연산자를 이용해 체크박스가 체크가 되었을때는 Checked!!, 체크가 풀릴때는 Unchecked을 같이 보여준다.
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
    </div>
  );
}