React state&props

◎React State& Props

• State: 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값
• Props: 외부로부터 전달받은 값

  ex1)
  props: 이름,성별
  state: 나이 , 연애여부 등
  ex2)
  toggle switch의 state: on/off 여부

‣props

• props의 특징

  1. 컴포넌트의 속성(property)
  2. 부모 컴포넌트로부터 전달받은 값이다.
  3. 객체 형태이다.
  4. 함부로 변경될 수 없는 읽기전용 객체이다.

• props를 사용하는 방법

  1. 하위컴포넌트에 전달하고자 하는 값과 속성의 정의한다.
     -방법1

     //react에서 속성및 값을 할당(전달하고자 하는 값을 중괄호{}로 감싸기)
     function Parent() {
      return (
        <div className="parent">
          <h1>I'm the parent</h1>
          <Child text={"I'm the eldest child"} />     
        </div>
      );
     }

     -방법2
     : 여는 태그와 닫는 태그 사이에 value를 넣어 전달하는 방법=>props.children이용

      function Parent() {
     return (
       <div className="parent">
           <h1>I'm the parent</h1>
           <Child>I'm the eldest child</Child>//열고 닫는 태그 사이에 넣기
       </div>
     );
     };
     

  2. props를 이용하여 정의된 값과 속성을 전달한다.

     //<parent>컴포넌트에서 전달한 문자열을 <child>컴포넌트에서 받기.react컴포넌트에 props를 전달하면 필요한 모든 데이터를 가지고 온다.
     function Child(props) {
     return (
       <div className="child"></div>
     );
     };

  3. 전달받은 props를 렌더링한다.

     //props는 객체로, 이 객체의 {key:value}는 <parent>컴포넌트에서 정의한 {attribute: value}의 형태를 띤다.
     function Child(props) {
      return (
        <div className="child">
          <p>{props.text}</p>  //"I'm the eldest child"
        </div>
      );
     };

‣State

• state를 다루는 방법

  • usestate 사용법

  1. react로 부터 usestate불러오기
     import {useState} from “react”;

  2. usestate호출하기(=“state”라는 변수를 선언)

     function CheckboxExample() {
     // 새로운 state 변수를 선언하고, 여기서는 이것을 isChecked 라 부르겠습니다.
     //isChecked, setIsChecked 는 useState 의 리턴값을 구조 분해 할당한 변수입니다.
     const [isChecked, setIsChecked] = useState(false);
     // const [state 저장 변수, state 갱신 함수] = useState(state 초깃값);
     }
     //usestate를 호출하면 배열을 반환
     //배열의 0번째 요소는 현재 state변수, 1번쨰요소는 이변수를 갱신할 수 있는 함수, usestate의 인자로 넘겨주는 값은 state의 초깃값

     -Ischecked:state를 저장하는 변수
     -setischecked: state ischecked를 변경하는 함수
     -Usestate: state hook
     -False: state 초깃값

  3. 이 state에 저장된 값을 사용하기위해 JSX앨리먼트 안에 직접 불러서 사용
     여기서는 삼항연산자
     <span>{isChecked ? "Checked!!" : "Unchecked"}</span>

  4. state갱신하기
     사용자가 체크박스 값을 변경하면 onChange 이벤트가 이벤트 핸들러 함수인 handleChecked 를 호출하고, 이 함수가 setIsChecked 를 호출하게 됩니다. setIsChecked 가 호출되면 호출된 결과에 따라 isChecked 변수가 갱신되며, 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} />
          <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
        </div>
      );
     }

‣이벤트 처리

• 자주 사용되는 이벤트 처리

  • onChange: <input> <textarea> <select> 와 같은 폼 엘리먼트는 사용자의 입력값을 제어하는 데 사용
    -onChange 이벤트가 발생하면 e.target.value 를 통해 이벤트 객체에 담겨있는 input 값을 읽어올 수 있습니다.
    -컴포넌트 return 문 안의 input 태그에 value 와 onChange 를 넣어준다.
    -onChange 는 input 의 텍스트가 바뀔 때마다 발생하는 이벤트이다.
    -이벤트가 발생하면 handleChange 함수가 작동하며, 이벤트 객체에 담긴 input 값을 setState 를 통해 새로운 state 로 갱신한다.

    function NameForm() {
     const [name, setName] = useState("");
    
     const handleChange = (e) => {
       setName(e.target.value);
     }
    
     return (
       <div>
         <input type="text" value={name} onChange={handleChange}></input>
         <h1>{name}</h1>
       </div>
     )
    };

  • onClick: 사용자가 클릭이라는 행동을 하였을 때 발생하는 이벤트
    -버튼이나 <a> tag 를 통한 링크 이동 등과 같이 주로 사용자의 행동에 따라 애플리케이션이 반응해야 할 때 자주 사용하는 이벤트

    //버튼 클릭시 input tag에 입력한 이름이 alert을 통해 알림창이 팝업 되도록함
    //함수 정의하기
    <button onClick={() => alert(name)}>Button</button>
    (input밑에 추가)
    //함수자체를 전달하기
    const handleClick = () => {
     alert(name);
    };
    …
    <button onClick={handleClick}>Button</button>
    …

• 예제

  • Action item1:<select>

: 사용자가 drop down 목록을 열어 그중 한 가지 옵션을 선택하면, 선택된 옵션이 state 변수에 갱신

• Action item 2 : Pop up
  : Pop up 의 open 과 close 를 state 를 통해 관리