[TIL] Day29 #Props #State

[TIL] Day29
[SEB FE] Day29

☑️ React State & Props

📎 Props

• 컴포넌트의 속성(property)
• 외부로부터 전달받은 값 [부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값]
  👉 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용 가능
• 객체 형태
• 읽기 전용; ready-only (변경 ❌) ⇒ immutable한 데이터
• 데이터를 전달하는 데 사용함
• 클래스 컴포넌트, 함수형 컴포넌트 모두에서 사용 가능
• 여러 개 지정 가능

✔️ Props 사용 방법

1. 하위 컴포넌트에 전달하고자 하는 값&속성 정의
2. props를 이용하여 정의된 값&속성 전달
3. 전달받은 props 렌더링

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child text={"I'm the eldest child"}/> {/* 속성 & 값 할당 */}
    </div>
  );
};

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

✋ props는 {attribute: value} 형태로 출력

✔️ props.children

태그 사이에 value를 넣어 전달 → 해당 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

컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값

✔️ useState

state를 다루는 방법 중 하나

➰ useState 호출

const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);

import { useState} from 'react';

function CheckboxExample() {
	// useState 호출 = 'state' 변수 선언 (함수가 끝나도 사라지지 않음)
	const [isChecked, setIsChecked] = useState(false);
	// setIsChecked: state 'isChecked'를 변경하는 함수
}

// 사용
<span>{isChecked ? "Checked!!" : "Unchecked"}</span>

➰ state 갱신

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 state는 상태 변경 함수 호출로 변경해야 함 (강제 변경 시도 ❌)

✋ state는 하위 컴포넌트에서도 존재 가능

📎 Event handling

• camelCase 사용
• JSX 사용하여 문자열이 아닌 함수로 이벤트 처리 함수(Event handler) 전달

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

✔️ onChange

• React에선 변경될 수 있는 입력값을 컴포넌트의 state로 관리하고 업데이트함

➰ onChange example Logic

• onChange 이벤트 발생 → e.target.value를 통해 이벤트 객체에 담겨있는 input값을 읽어옴
• 이벤트 발생 → handleChange 함수 작동 → 이벤트 객체에 담긴 input 값을 setState를 통해 새로운 state로 갱신
  
  

✔️ onClick

function NameForm() {
	// useState 호출
	const [name, setName] = useStaet("");
	
	// event handling
	const handleChange = (e) => {
		setName(e.target.value);
	}

	return (
		<div>
			<input type="text" value={name} onChange={handleChange}></input>
			<button onClick={alert(name)}>Button</button>
			{/* alert(name) 함수를 바로 호출
			 -> 컴포넌트 렌더링될 때 함수 자체가 아닌 함수 호출 결과가 onClick에 적용
			 -> (버튼 클릭할 때가 아닌) 렌더링될 때 실행되어서 undefined 반환
       		 => onClick 이벤트에 함수 전달시 리턴문 안에서 함수 정의하거나 
					리턴문 외부에서 함수 정의 후 이벤트에 함수 자체를 전달해야 함 */}
		</div>
	)
};

// 함수 정의
return (
	<div>
		<button onClick={() => alert(name)}Button</button>
	</div>
	)
};

----------

// 함수 자체 전달
const handleClick = () => {
	alert(name);
};

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

// pop-up example

// 기본 화면으로 'Open me' Button 표시 -> 누르면 'Success!' 문구와 함께
// 'Close me' Button이 팝업으로 등장
// 'Close me' Button 누르면 다시 팝업 닫힘

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

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

  const togglePopup = () => {
    setShowPopup(!showPopup)
		
	 // ! 난 아래처럼 조건문을 이용해서 했는데 위처럼 하면 한줄에 완전 간단히 구현 가능 !
	 // if(showPopup === false) {
	 // setShowPopup(true)
	 // } else {
	 //   setShowPopup(false)
	 // }
  };

  return (
    <div className="App">
      <h1>Fix me to open Pop Up</h1>
      <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;

📎 Controlled Component

// controlled-component example
import "./styles.css";
import React, { useState } from "react";

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

  const handleChangeMsg = (event) => {
    setMsg(event.target.value);
  };

  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>

      <textarea
        placeholder="여기는 텍스트 영역입니다."
        className="tweetForm__input--message"
        onChange={handleChangeMsg}
        value={msg}
      ></textarea>
    </div>
  );
}

📎 React 데이터 흐름

• React 개발 방식은 페이지 단위가 아닌, 컴포넌트 단위로 시작

• 상향식(bottom-up)으로 앱 개발 → 테스트가 쉽고 확장성 👍

• React는 단방향 데이터 흐름(one-way data flow)을 따름

• 컴포넌트 계층 구조로 나누는 것이 가장 먼저 해야할 일!

  👉 페이지를 만들기 이전에, 컴포넌트를 먼저 만들고 조립하기

 ✋ 데이터 전달 주체는 부모 컴포넌트
데이터 흐름-하향식(top-down)) ⇒ 데이터는 위에서 아래로!

 ✋ 두 개의 자식 컴포넌트가 하나의 상태에 접근하고자 할 땐 두 자식의 공통 부모 컴포넌트에 상태를 위치해야 함

🤷‍♀️ Q: 어떤 데이터를 state로 두어야 하나요?

🙆‍♀️ A: 1. 부모로부터 props를 통해 전달되면 ❌
          2. 시간이 지나도 변하지 않는다면 ❌
          3. 컴포넌트 안의 다른 state나 props로 계산이 가능하다면 ❌

---

☑️ [Pair] React Twittler State & Props

3일간의 휴일이 끝나고, 불과 몇일 전에 진행한 Intro, SPA 코드도 기억이 안 나서 더듬더듬 전 코드를 구현했다.
+트윗 전송 Form 기능을 추가 구현했어야 했는데 쉽지 않았다.🥲
아 그리고 계속 console 창에 Warning: Each child in a list should have a unique “key” prop. 경고창이 계속 떠있어서 없애느라 애먹었는데 페어분이 map있는 곳에 key를 추가해서 없앴다. map & key 한 쌍으로 기억하자..
페어분과 함께해서 어찌어찌 Bare Minimum Requirement Test는 통과했지만,
아직도 뭔가 코드가 머릿속에서 엉킨 느낌이라 좀 더 공부하고 코드 이해 과정?을 정리해봐야겠다.
오늘은 수업 끝나고 알바 대타 갔다와서 추가 학습을 할 시간이 없었다.. (핑계🫠)
내일은 Advanced Challenge인 필터 기능과 트윗 삭제 기능 구현해보기!