[TIL] Day30 #useState

[TIL] Day30
[SEB FE] Day30

☑️ [Pair] React Twittler State & Props

어제 구현했던 기능에 + select를 활용한 필터링 기능과 트윗 delete 기능 구현을 진행했다.
페어분 캐리로 한 사용자의 두 개 이상의 트윗 중 하나의 트윗만 삭제했을 경우 select의 option란에 name이 그대로 남아있어야 하는데 지워져 버리는 문제빼곤 해결했다.
아직 완벽하게 코드 이해를 못해서 좀 더 공부한 후에 코드 이해 과정에 대해 정리해야겠다.
코드도 막 짜서 복잡하다고 해야하나,, 코드 리팩토링 과정도 매우 필요하다. 🫠
계속 미루다간 평생 안 할 수도 있으니 이번주 내로 꼭꼭 하자,,💪

---

☑️ Quiz

종합 Quiz 풀고 헷갈렸던 React 관련 개념 정리

• React에서 이벤트 처리시 이벤트에 전달하는 값은 함수여야 함.

• 이벤트 이름은 camelCase로 설정

• 이벤트 핸들러는 props로 전달 가능

• React에서 컴포넌트 간의 데이터를 전달할 땐 Props 사용

• useState는 state를 함수 컴포넌트 안에서 사용 가능

• useState를 사용해서 새로운 state를 선언할 때 [count, setCount] 처럼 배열로 구조 분해 할당하여 사용

• useState()의 전달인자는 useState가 반환하는 배열의 첫 번째 요소로 넘겨주는 초기 상태 값로 하나만 전달 가능

🤷‍♀️ Q: Hello 컴포넌트 👇

const Hello = (props) => <div> {props.name}</div>
name props를 전달하는 방법

🙆‍♀️ A:

// 사실 나는 잘 모르겠어서 느낌으로 1번이 틀렸다고 생각했는데 알고 보니 그냥 함수였던 것,,
// 아직도 잘은 이해가 가진 않는다🥲 함수를 자유자재로 사용할 수 있도록 하기!

// 1. 함수 선언식
funtion Say() {
	return (
		<Hello name="Beanxx" />
	)
}

----------

// 2. 함수 표현식
const Say = () => <Hello name={"Beanxx"} />

----------

// 3. name 변수에 값 할당 후 전달
function Say() {
	const props = {
		name: "Beanxx"
	};
	return <Hello {...props} />;
}

----------

// ❌ wrong example
// Syntax Error
const Say = () => <Hello props={name: "Beanxx"} />

// React에서 select를 useState로 상태 관리 -> 렌더링
import React, { useState } from "react";

function SelectFruit() {
  const [choice, setChoice] = useState("apple");

  const fruits = ["apple", "orange", "pineapple", "strawberry", "grape"];

  const options = fruits.map((fruit, idx) => {
    return <option key={idx} value={fruit}>{fruit}</option>;
  });
	
  // event handler - 선택된 과일로 state 갱신 => 선택된 과일이 state 변수에 담겨 갱신
  const handleFruit = (event) => {
    // target 속성엔 이벤트가 발생한 엘리먼트 정보가 담겨있음
    setChoice(event.target.value);
  };

  return (
    <div className="container">
	  {/* <select/>: Form 엘리먼트의 하나로 사용자 입력값 제어하는데 주로 사용 */}
      <select onChange={handleFruit}>{options}</select>
      <h3>You choose "{choice}"</h3>
    </div>
  );
}

// 이벤트 핸들러 정의 방법

const App = () => {
	const [number, setNumber] = useState(0);

	// 1번째 방법. 변수로 선언한 후 onClick에 변수를 넘겨주는 방법
	const plusNumber = () => setNumber(number + 1);

	return (
		<div>
			<button onClick={plusNumber}>Plus<button>
			{/* 2번째 방법. JSX 내에 onClick에 바로 함수 정의 */}
			<button onClick={() => setNumber(number => number - 1)}>Plus<button>
		</div>
    )
}