[TIL] Day30 #useState

Beanxxยท2022๋…„ 6์›” 8์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
30/120
post-thumbnail

[TIL] Day30
[SEB FE] Day30

โ˜‘๏ธย [Pair] React Twittler State & Props

์–ด์ œ ๊ตฌํ˜„ํ–ˆ๋˜ ๊ธฐ๋Šฅ์— + select๋ฅผ ํ™œ์šฉํ•œ ํ•„ํ„ฐ๋ง ๊ธฐ๋Šฅ๊ณผ ํŠธ์œ— delete ๊ธฐ๋Šฅ ๊ตฌํ˜„์„ ์ง„ํ–‰ํ–ˆ๋‹ค.
ํŽ˜์–ด๋ถ„ ์บ๋ฆฌ๋กœ ํ•œ ์‚ฌ์šฉ์ž์˜ ๋‘ ๊ฐœ ์ด์ƒ์˜ ํŠธ์œ— ์ค‘ ํ•˜๋‚˜์˜ ํŠธ์œ—๋งŒ ์‚ญ์ œํ–ˆ์„ ๊ฒฝ์šฐ select์˜ option๋ž€์— name์ด ๊ทธ๋Œ€๋กœ ๋‚จ์•„์žˆ์–ด์•ผ ํ•˜๋Š”๋ฐ ์ง€์›Œ์ ธ ๋ฒ„๋ฆฌ๋Š” ๋ฌธ์ œ๋นผ๊ณค ํ•ด๊ฒฐํ–ˆ๋‹ค.
์•„์ง ์™„๋ฒฝํ•˜๊ฒŒ ์ฝ”๋“œ ์ดํ•ด๋ฅผ ๋ชปํ•ด์„œ ์ข€ ๋” ๊ณต๋ถ€ํ•œ ํ›„์— ์ฝ”๋“œ ์ดํ•ด ๊ณผ์ •์— ๋Œ€ํ•ด ์ •๋ฆฌํ•ด์•ผ๊ฒ ๋‹ค.
์ฝ”๋“œ๋„ ๋ง‰ ์งœ์„œ ๋ณต์žกํ•˜๋‹ค๊ณ  ํ•ด์•ผํ•˜๋‚˜,, ์ฝ”๋“œ ๋ฆฌํŒฉํ† ๋ง ๊ณผ์ •๋„ ๋งค์šฐ ํ•„์š”ํ•˜๋‹ค. ๐Ÿซ 
๊ณ„์† ๋ฏธ๋ฃจ๋‹ค๊ฐ„ ํ‰์ƒ ์•ˆ ํ•  ์ˆ˜๋„ ์žˆ์œผ๋‹ˆ ์ด๋ฒˆ์ฃผ ๋‚ด๋กœ ๊ผญ๊ผญ ํ•˜์ž,,๐Ÿ’ช

แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2022-06-09 แ„‹แ…ฉแ„Œแ…ฅแ†ซ 1 46 31

โ˜‘๏ธย 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>
    )
}
profile
FE developer

0๊ฐœ์˜ ๋Œ“๊ธ€