React 특징

• 상향식(bottom-up) : 컴포넌트 먼저 만들고 조립하기
  • 테스트 쉽고 확장성이 좋음

왜 state 씀?

• state를 렌더링 조건으로, 변경된 부분을 갱신하기 위해 사용한다.
  state는 새로운배경, 새주소로 갱신해야 렌더링된다.
  기존 state vs 새로운 state 주소 값을 비교하여 주소가 달라야 변화를 감지하고 렌더링한다.

State

컴포넌트 사용 중 컴포넌트 내부에서 변하는 값
ex) 나이, 현재 사는 곳, 취업 여부, 결혼 여부

• useState

import { useState } from "react"; //  useState 불러오기
function CheckboxExample() {
  // 1번 코드(구조분해할당)를 풀어쓰면
  const [isChecked, setIsChecked] = useState(false); 
// const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);
  
  //...

  // 2번 코드와 같습니다.
  const stateHookArray = useState(false);
  const isChecked = stateHookArray[0];
  const setIsChecked = stateHookArray[1];
}

결과물

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);
// isChecked : state를 저장하는 변수
// setIsChecked : state isChecked 를 변경하는 함수
  
  const handleChecked = (event) => {
    setIsChecked(event.target.checked); // 상태변경함수 호출로 변경해야한다
    //isChecked = true; 강제변경시도하면 리렌더링이 안되거나 상태변경이 안된다.
  };
  return (
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
    </div>
  );
}

• input태그 checked속성
  <input type="checkbox" checked/>
  type 속성값이 “checkbox” 또는 “radio”인 경우만 사용가능하다
  checked를 명시하면 true, 안 적으면 자동으로 false값을 가진다

Props

외부로부터 전달받은 바꿀 수 없는 값
ex) 이름, 성별

• 컴포넌트 속성(property)을 의미
• 하향식(top-down)
  • 데이터흐름 : 부모 => 자식으로 props 전달받음
  • 함수의 전달인자처럼 props를 전달받음.
  • 최초 렌더링 시, 화면에 출력할 데이터를 담은 초깃값으로 사용 가능
• 객체 형태
  : props로 어떤 타입의 값도 전달 가능하도록 객체 형태를 가짐
• 읽기 전용
  : 외부로부터 전달받은 변경 불가인 읽기 전용 객체
  • 읽기전용객체가 아니면,
    props 전달받은 하위 컴포넌트에서 props 수정 시 상위 컴포넌트 값에 영향을 주기 때문이다. 그러면 side effect가 발생하고, 단방향, 하향식 데이터 흐름 원칙에 위배된다.

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

function Child(props) {
  console.log(props); // {text: "I'm the eldest child"}
  return (
    <div className="child">
      <p>{props.text}</p>
    </div>
  );
}

export default Parent;

• 부모컴포넌트에서 <Child attribute={value}/>로 속성을 넣고 function Child(props)로 props를 받는다

---

이벤트 처리 방식

HTML에서의 이벤트 처리 방식

<button onclick="handleEvent()">Event</button>

React의 이벤트 처리 방식

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

---

onChange

input의 텍스트 변경시마다 발생하는 이벤트

• form 요소는 사용자 입력값 제어하는 데 사용
  <input> <textarea> <select> 등

• 이렇게 변경될 수 있는 입력값은 컴포넌트의 state로 관리하고 업데이트

• e.target.value 로 이벤트 객체에 담겨있는 input 값 불러올 수 있음

예제

input에 onChange이벤트가 발생하면 handleChange 함수 실행되고,
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

사용자가 클릭했을 때 발생하는 이벤트

• <button>, <a> 의 링크 이동 등과 같이 클릭 시 사용하는 이벤트

예제

버튼 클릭 시 input에 입력한 내용을 alert로 알림 창 띄우기

틀린 전달 방법 - OnClick={함수()}

function NameForm() {
  const [name, setName] = useState("");

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

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>]
      //틀린방법. alert함수를 바로 호출하면, 바로 실행되버림
      <button onClick={alert(name)}>Button</button>
      <h1>{name}</h1>
    </div>
  );
};

• 틀린방법 : alert함수를 바로 호출시,
  컴포넌트가 렌더링될 때 함수 자체가 아닌 함수 호출의 결과가 onClick에 적용된다. 그래서 버튼 클릭시가 아닌 렌더링될 때 alert실행되고 undefined(함수가 리턴값이 없을때는 undefined 호출한다)가 onClick에 적용되어 아무런 결과가 나타나지 않는다.

✅ 올바른 함수 전달 방법

1. 화살표함수 정의 방법

• onClick={() => alert(name)}
  화살표함수를 사용하여 정의해야 컴포넌트 state에 함수들이 접근할 수 있다.

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

2. 함수 자체를 전달

• onClick={handleClick}

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

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

---

예제

• 버튼 클릭 시 state를 true, false 반환
  

import React, { useState } from "react";

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

  const togglePopup = () => {
    // Pop up 의 open/close 상태에 따라
    // 현재 state 가 업데이트 되도록 함수를 완성하세요.
    setShowPopup(!showPopup);
  };

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

• input 입력값에 따라 state가 변경되게 하기
  

import React, { useState } from "react";

export default function App() {
  const [username, setUsername] = useState("");
  const [msg, setMsg] = useState("");

  return (
    <div className="App">
      <div>{username}</div>
      <input
        type="text"
        value={username}
        onChange={(event) => setUsername(event.target.value)}
        placeholder="여기는 인풋입니다."
        className="tweetForm__input--username"
      ></input>
      <div>{msg}</div>
      {/* TODO : 위 input과 같이 입력에 따라서 msg state가 변할 수 있게 
      아래 textarea를 변경하세요. */}
      <textarea
        placeholder="여기는 텍스트 영역입니다."
        className="tweetForm__input--message"
        onChange={() => setMsg(event.target.value)}
        value={msg}
      ></textarea>
    </div>
  );
}

참조

https://reactwithhooks.netlify.app/docs/forms.html