[React] State & Props

노호준·2023년 1월 26일

💡State

컴포넌트 안에서만 변화하는 값
살면서 변할 수 있는 값
컴포넌트 사용중 컴포넌트 내부에서 변할 수 있는 값

Props

props는 외부로부터 전달받은 값
부모 컴포넌트로부터 전달받은 값
객체형태임
읽기전용임. 변경안됨
props 주는법 : 컴포넌트 return 문 안에 하위컴포넌트에 키,값을 적어둔다.

return (
    <div>
        <Search onSearch= {search} />
    </div>
);

// 상위컴포넌트에서 하위컴포넌트 쓸때 값을 주면
function Search(props) {
  const handleSearchClick = () => {
    // search함수를 실행시킨다.
    props.onSearch({departure : 'ICN', destination : textDestination});

   //props.값으로 쓸수있다.
  };

실생활에서 구분

이름 p 성별 p 나이 s 사는곳 s 취업여부 s 결혼여부 s 변할수있으면 state
토글 스위치의 state는 on/off 여부

Props 사용법

하위 컴포넌트에 전달하고자 하는 값과 속성을 정의한다.
props를 이용하여 정의된 값과 속성을 전달한다.
전달받은 props를 렌더링한다.
태그사이로 값을 전달할수도 있다.

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child text={"I'm the eldest child"} />
      {/* Child 컴포넌트에 또 다른 문자열을 props 로 전달해 보세요 */}
      <Child a={344}/>
    </div>
  );
}

function Child(props) {
  // console 을 열어 props 의 형태를 직접 확인하세요.
  console.log("props : ", props);
  return (
    <div className="child">
      <p>{props.a}</p>
      <p>{props.text}</p>
    </div>
  );
}

export default Parent;

props.children

const App = () => {
  const itemOne = "React를";
  const itemTwo = "배우고 있습니다.";

  return (
    <div className="App">
      {/* Learn 컴포넌트에 itemOne 과 itemTwo 를
      props 로 전달하세요 */}
      <Learn a={itemOne}/>
      <Learn b={itemTwo}/>
    </div>
  );
};

const Learn = (hojun) => {
  // 전달받은 props 를 아래 <div> tag 사이에 사용하여
  // "React를 배우고 있습니다" 라는 문장이 렌더링되도록 컴포넌트를 완성하세요
  return <div className="Learn">
    {hojun.a}{hojun.b}
  </div>;
};

states

컴포넌트 내에서 변할수 있는 값(상태) 는 state로 다룬다.
state 다루기위해 useState라는 함수를 리엑트에서 제공
import { useState } from "react"
useState 사용법
const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);
function CheckboxExample() { const [isChecked, setIsChecked] = useState(false);
<span>{isChecked ? "Checked!!" : "Unchecked"}</span>
밑 예제에서 사용자가 체크박스 값을 변경하면 onChange이벤트가 이벤트핸들러함수 handleChecked를 호출하고 이게 setIsChecked를 호출하게 됨. 호출된결과에 따라 변수가 갱신되고, 리액트는 새로운 변수를 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>
  );
}

트위터로 치면 보내는사람, 보내는 내용이 state가 되어야 함

이벤트 처리

react의 이벤트는 JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달함

<button onclick="handleEvent()">Event</button> //html
<button onClick={handleEvent}>Event</button> //react

onChange

input, textarea, select 같은 form엘리먼트는 사용자의 입력값을 제어하는데 사용됨.
이런 변경되는 입력값을 state로 관리해야함
onChange이벤트가 발생하면 e.target.value로 이벤트객체에 담긴 input값을 읽어옴

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>
  )
};

컴포넌트 리턴문안에 input태그에 value와 onChange를 넣었음. input의 텍스트가 바뀔때마다 onChange는 이벤트가 발생함.
이벤트가 발생하면 handleChange 함수가 작동하며 이벤트객체에 담긴 input값을 setState를 통해 새로운 state로 갱신함

onClick

onClick에 함수를 직접 정의하거나, 함수자체를 따로 만들어서 전달하거나

// 함수 정의하기

return (
  <div>
	...
    <button onClick={() => alert(name)}>Button</button>
	...
  </div>
  );
};

// 함수 자체를 전달하기

const handleClick = () => {
  alert(name);
};

return (
  <div>
      ...
    <button onClick={handleClick}>Button</button>
      ...
  </div>
  );
};

예제

import React, { useState } from "react";
import "./styles.css";

function App() {
  const [showPopup, setShowPopup] = useState(false);

  const togglePopup = (e) => {
    // Pop up 의 open/close 상태에 따라
    // 현재 state 가 업데이트 되도록 함수를 완성하세요.
    if(showPopup === false) setShowPopup(true); //showPopup값은 이렇게 바꿔준다.
    if(showPopup === true) setShowPopup(false);
  };

  return (
    <div className="App">
      <h1>Fix me to open Pop Up</h1>
      {/* 버튼을 클릭했을 때 Pop up 의 open/close 가 작동하도록
          button tag를 완성하세요. */}
      <button className="open" onClick={togglePopup}>Open me</button>
      {showPopup ? (
        <div className="popup">
          <div className="popup_inner">
            <h2>Success!</h2>
            <button className="close" onClick={togglePopup}>
              Close me
            </button>
          </div>
        </div>
      ) : null}
    </div>
  );
}

export default App;

추가팁


function solution(my_string, n) {
    var answer = [...my_string].map(v => v.repeat(n)).join(""); // 문자열을 배열화해서 맵으로 제어한뒤 .join("")으로 다시 문자열화하는 스킬
    console.log(answer);
    return answer;
}