[코드스테이츠/29DAY] S2U6 - [React] React State & Props

🌊 TIL : 2023년 3월 24일  

 

Props

 

 

: 외부로부터 전달받은 값, 웹 어플리케이션에서 해당 컴포넌트가 가진 속성, 부모 컴포넌트로부터 전달받은 값. 객체 형태. 함부로 벼 ㄴ경할 수 없는 읽기 전용 객체.

 

사용방법 1 : 전달하고자 하는 속성을 정의한 후, 전달하고자 하는 값을 중괄호 {}를 이용하여 감싸준다.

<Child attribute = {value}/>

<Ogu text={'I am Ogu'}/>

function Ogu(props) {
    return (
        <div className = "child"></div>
    )
}

1. 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의한다.
2. props를 이용하여 정의된 값과 속성을 전달
3. 전달받은 props를 렌더링한다.

 

사용방법 2 : 여는 태그와 닫는 사이에 value를 넣어 전달하기.  

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

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

 

 

 

State

: 내부에서 변할 수 있는 값. 

 

 

State hook, use State

useState를 호출하면 배열을 반환하는데 배열의 0번째 요소는 현재 state 변수이고 1번째 요소는 이 변수를 갱신할 수 있는 함수이다.

useState의 인자로 넘겨주는 값은 state의 초기값이다.

const [state 저장 변수, state 갱신 함수] = useState(상태 초기값);

state 갱신하기

 

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

  const handleChecked = (event) => {
    setIsChecked(event.target.checked);
    // 이벤트가 들어오면 setIsChecked 함수를 실행한다.
  };

  return (
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />
      // setIsChecked를 실행하는 함수 handleChecked를 onChange에
      
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
    </div>
  );
}

 

 

이벤트처리

• React에서 이벤트는 카멜케이스(camelCase)로 사용한다
• 중괄호로 감싸서 {이벤트처리함수}를 전달한다.

<button onClick ={Event}>Event</button>

자주 쓰는 이벤트 처리

• onChange : input, textarea, select같은 Form에서 입력값 제어할 때 사용. e.target.value를 통해 객체에 담긴 input값을 읽을 수 있다. 
• onClick : 클릭을 하였을 때 발생하는 이벤트 

 

어려웠던 부분

 

느낀점

 

더 공부할 것