React 기초2(props, state)

시디·2022년 1월 12일
0

웹개발

목록 보기
6/9

Props
props는 변하지 않는 외부로부터 전달받은 값으로 컴포넌트의 속성(property)을 의미한다.
props는 부모 컴포넌트(상위 컴포넌트)로 부터 잔달받은 값이기 때문에 컴포넌트가 최초 렌더링될 때 출력하고자 하는 데이터를 담은 초기값으로 사용할 수 있다.
props는 객체 타입으로 어떤 타입의 값이든 전달할 수 있다.
props는 외부로 전달받아 변하지 않는 값으로 함부로 변경되지 않아야 하기 때문에 읽기 전용(read-only)객체이다.

props 사용

  1. 하위 컴포넌트에 전달할 data와 속성 정의
  2. props를 이용해 값과 속성 전달
  3. 전달받은 props 렌더링

✅ props 사용 예시

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

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

props.children 사용 예시(태그 사이에 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는 ‘상태’라는 뜻으로 컴포넌트 내부에서 변할 수 있는 값을 의미한다.
React state는 컴포넌트 내에서 변할 수 있으며 이에 따라 화면이 변화한다.

State hook

useState() : React에서 state를 다루는 방법

import { useState } from "react";
  • useState를 사용하기 위해서는 코드로 useState를 import해줘야 한다.

✅ useState 사용 예시

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>
  );
}
  • isChecked, setIsCheckeduseState 의 리턴값을 구조 분해 할당한 변수
  • isChecked는 state를 저장하는 변수, setIsChecked는 state를 변경하는 함수
  • false는 state초기 값

사용자가 체크박스 값을 변경하면 onChange 이벤트가 이벤트 핸들러 함수인 handleChecked 를 호출하고, 이 함수가 setIsChecked 를 호출하고 결과에 따라 isChecked 변수가 갱신되며, React는 새로운 isChecked 변수를 CheckboxExample 컴포넌트에 넘겨 해당 컴포넌트를 다시 렌더링한다.

❗️React state는 상태 변경 함수 호출로 변경해야하는데, 만약 강제로 변경을 시도하면 리렌더링 되지 않거나 state가 제대로 변경되지 않는다.

✅ React Event handling

  • 이벤트는 소문자 대신 카멜 케이스 사용
  • 문자열이 아닌 함수로 이벤트 처리 함수(Event handler)를 전달

ex)

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

onChange : <input> <textarea> <select> 등 사용자의 입력값을 제어하는데 사용

  • 변경될 수 있는 값을 일반적으로 state로 관리
  • 이벤트 발생 시 e.target.value를 통해 input 값 사용 가능
function textForm() {
  const [message, setMessage] = useState("");

  const handleChange = (e) => {
    setMessage(e.target.value);
  }

  return (
    <div>
      <input type="text" value={message} onChange={setMessage}></input>
      <h1>{message}</h1>
    </div>
  );
};

onClick : 버튼이나 <a> tag 를 통한 링크 이동 등과 같이 주로 사용자의 행동에 따라 애플리케이션이 반응해야 할 때 자주 사용

function (buttonForm) {
  const handleClick = () => {
	  alert('Clicked!!');
	};

  return (
    <div>
	    <button onClick={handleClick}>Button</button>
	  </div>
  );
};
profile
콰삭칩을 그리워하는 개발자 입니다.

0개의 댓글