[React] state와 onClick

props (“properties”의 줄임말) 와 state 는 일반 JavaScript 객체다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있다. props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다. 

	State	Props
유스케이스	뷰에 렌더링돼야 하는 컴포넌의 데이터를 저장하는데 사용	데이터, 이벤 핸들를 자식 컴포넌에 전달하는 데 사용
가변성	상태는 데이터를 보유하고 시간이 지남에 따라 변경될 수 있음	props는 바뀔 수 없음. 한번 설정되면 props를 변경할 수 없음
업데이트	이벤트 핸들러는 일반적으로 state를 업데이트 함	상위 컴포넌트는 하위 컴포넌트에 대한 props를 설정함

---

React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사하지만, 몇 가지 문법 차이는 있다.

• React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용한다.
• JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.

<button onclick="activateLasers()">
  Activate Lasers
</button>

HTML 방식

<button onClick={activateLasers}>
  Activate Lasers
</button>

React 방식

 

또 다른 차이점으로, React에서는 false를 반환해도 기본 동작을 방지할 수 없다. 반드시 preventDefault를 명시적으로 호출해야 한다.

 

핸들링 함수 선언

import React from "react";

export default function App() {
  const [result, setResult] = React.useState("No");
  console.log(result);
  function buy() {
    setResult( !result )
  }
  return (
    <div className="App">
      <h1>시험 공부 할까요?</h1>
      <h2>{result ? "Yes" : "No"}!</h2>
      <button onClick={buy}>다시 생각해보자</button>
    </div>
  );
}

const[var, setVar] = react.useState("초기값")

var은 state, setVar은 state 값을 바꿀 수 있는 setter 함수이다.

---

State를 Props로 받는 방법

다음은 부모 컴포넌트의 state 값을 자식 컴포넌트의 props로 전달하는 코드다.

jsxCopy code
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [parentState, setParentState] = useState('Hello');

  return (
    <ChildComponent childProp={parentState} />
  );
}

---

Callback function을 props로 받는 방법

자식 컴포넌트에서 부모 컴포넌트의 함수를 실행할 때 사용된다.

부모 컴포넌트의 함수를 자식 컴포넌트의 props로 전달한다.

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [parentState, setParentState] = useState('Hello');

  function handleClick() {
    setParentState('World');
  }

  return (
    <ChildComponent childProp={parentState} handleClick={handleClick} />
  );
}