πŸŽ„ μ„±μž₯일지 4.0

μ±… ν–‰λ³΅ν•œ 이기주의자(웨인 닀이어)의 λ‚΄μš©μ— μžκ·Ήλ°›μ•„ μ‹œμž‘ν•˜λŠ” μ†Œλ°•ν•œ μ„±μž₯기둝

μ‚΄μ•„μžˆλŠ” 꽃과 죽은 꽃은 μ–΄λ–»κ²Œ κ΅¬λ³„ν•˜λŠ”κ°€?
μ„±μž₯ν•˜κ³  μžˆλŠ” 것이 μ‚΄μ•„ μžˆλŠ” 것이닀.
생λͺ…μ˜ μœ μΌν•œ μ¦κ±°λŠ” μ„±μž₯이닀!

🌳 (1.0)ν‚€μ›Œλ“œ
μ΅œλŒ€ν•œ κ°„λ‹¨ν•˜κ²Œ 정리, 좔후에 λ³΄λ©΄μ„œ 슀슀둜 μ„€λͺ…
πŸ‰ (2.0)κ²½ν—˜ μœ„μ£Όλ‘œ
λ‹¨μˆœ 정보λ₯Ό μ „λ‹¬ν•˜κΈ°λ³΄λ‹€ 무엇을 λ°°μ› κ³  μ–΄λ–»κ²Œ ν•΄κ²°ν–ˆλŠ”μ§€ 짧고 κ°„λ‹¨ν•˜κ²Œ μž‘μ„±
❄️ (3.0)정해진 ν…œν”Œλ¦Ώμ— λ§žμΆ°μ„œ
ν‚€μ›Œλ“œ, κ²½ν—˜ λͺ¨λ‘ μ’‹λ‹€. λ‹€λ§Œ 맀일 μž‘μ„±ν•˜κΈ°λ‘œ 마음 λ¨Ήμ€λ§ŒνΌ ν•΅μ‹¬λ§Œ κ°„κ²°ν•˜κ²Œ 정리할 수 있게 ν…œν”Œλ¦Ώμ„ μž‘μ„±
(3.1)230102λΆ€ν„° μ‹œμž‘λ˜λŠ” ν•™μŠ΅μ— κ΄€ν•œ λ‚΄μš© μΆ”κ°€
(3.2)230313λΆ€ν„° 쒀더 κ²½ν—˜, 감정 μœ„μ£Όμ˜ λ‚΄μš©λ„ λ‹΄κΈ°!
🌾 (4.0)ν•™μŠ΅ ν‚€μ›Œλ“œμ—μ„œ μ΅œλŒ€ν•œ κ°„λ‹¨ν•œ 정보 제곡, κ³ λ―Όμ—μ„œ λ‚΄ κ²½ν—˜μ„ μžμ„Ένžˆ 적자!

πŸ”‘ 였늘의 ν•™μŠ΅ ν‚€μ›Œλ“œ

κ°„λ‹¨ν•œ react todo app λ§Œλ“€κΈ°

κ°•μ˜μ—μ„œ λ‚˜μ˜€λŠ” ν”„λ‘œμ νŠΈ 쀑 ν•˜λ‚˜μ§€λ§Œ, κ°•μ˜λ₯Ό ν•˜λ‚˜λ„ 보지 μ•Šκ³  κ΅¬ν˜„ν•΄λ³΄μ•˜λ‹€. κ·ΈλŸ¬κ³ λ‚˜μ„œ κ°•μ˜λ₯Ό λ³΄λ©΄μ„œ λ¦¬νŒ©ν† λ§μ„ ν•˜λŠ”λ°, μ—­μ‹œλ‚˜ 처음 λ‚΄κ°€ μ§  μ½”λ“œλŠ” λ‹€μ†Œ μ§€μ €λΆ„ν–ˆλ‹€. κ·ΈλŸΌμ—λ„ λ¦¬νŒ©ν† λ§ν•˜λ©΄μ„œ 더 효윑적인 방법, 더 보기 쒋은 λ°©λ²•μœΌλ‘œ μ½”λ“œλ₯Ό μ •λ¦¬ν•˜λŠ” 게 λ„ˆλ¬΄ 재미있고 ν₯λ―Έλ‘œμ› λ‹€. 였늘 λŒ€ν‘œμ μœΌλ‘œ κΉ”λ”ν•˜λ‹€κ³  λŠλ‚€ 건 λΆ€λͺ¨ μ»΄ν¬λ„ŒνŠΈμ—μ„œ νŠΉμ • setState ν•¨μˆ˜λ₯Ό μ „λ‹¬ν•˜λŠ” 방법인데 κ°„λ‹¨ν•œ μ˜ˆμ‹œλ₯Ό λ“€λ©΄ μ•„λž˜μ™€ κ°™λ‹€.

λ‚΄κ°€ μž‘μ„±ν–ˆλ˜ 방식은 μ•„λž˜μ™€ κ°™λ‹€.

function Parent() {
  const [state, setState] = useState(false);

  return <Child setState={setState} />;
}

function Child() {
  return (
    <button
      onClick={() => {
        setState(prev => !prev);
      }}
    >
      Click
    </button>
  );
}

그리고 이λ₯Ό 쒀더 λ¦¬νŒ©ν† λ§ν•œ 방식은 μ•„λž˜μ™€ κ°™λ‹€.

function Parent() {
  const [state, setState] = useState(false);
  
  const handleState = () => {
    setState((prev) => !prev);
  }
  return <Child onClick={handleState} />;
}

function Child ({onClick}) {
  return (
    <button onClick={onClick}>
      Click
    </button>
  );
}

정말 별거 μ•„λ‹Œ κ±° κ°™μ§€λ§Œ, React Component에도 on으둜 μ‹œμž‘ν•˜λŠ” ν•¨μˆ˜ props둜 μ „λ‹¬ν•˜λ‹ˆ 훨씬 보기 νŽΈν•˜κ³  μ•ˆμ •μ μΈ λŠλ‚Œμ΄ λ“ λ‹€. λ˜ν•œ, stateλ₯Ό κ΄€λ¦¬ν•˜λŠ” 뢀뢄도 λΆ€λͺ¨ μ»΄ν¬λ„ŒνŠΈμ—μ„œ κ΄€λ¦¬ν•˜κ³ , μžμ‹ μ»΄ν¬λ„ŒνŠΈμ—μ„œλŠ” κ·Έλƒ₯ 전달받은 ν•¨μˆ˜λ₯Ό μ‹€ν–‰ν•˜λŠ” κ²ƒλ§ŒμœΌλ‘œλ„ stateλ₯Ό 관리할 수 μžˆλ‹€λŠ” 점이 λ„ˆλ¬΄ μ’‹μ•˜λ‹€.

πŸ€ 였늘의 κ³ λ―Ό ν‚€μ›Œλ“œ

ν•œκ΅­μ–΄ onKeyDown μ‹œ λ§ˆμ§€λ§‰ κΈ€μžμ— λŒ€ν•΄ μ΄λ²€νŠΈκ°€ 2번 λ°œμƒν•˜λŠ” 이슈

개발 곡뢀λ₯Ό ν•˜λ©΄μ„œ λŠλΌλŠ”κ±΄λ°, μ΄μ œλŠ” 이게 해결이 될까?ν•˜λŠ” 생각쑰차도 듀지 μ•Šκ²Œ λ˜μ—ˆλ‹€. κ·Έλƒ₯ λ¬Έμ œκ°€ 생기면 μ–΄λ–»κ²Œ ν•΄κ²°ν•  수 μžˆμœΌλ €λ‚˜?ν•˜λŠ” μƒκ°λ§Œ λ“ λ‹€. ν•΄κ²°ν•˜λŠ”λ° μ–Όλ§ˆλ‚˜ μ‹œκ°„μ΄ 걸리고 μ–Όλ§ˆλ‚˜ 효율적으둜 ν•  수 μžˆμ„μ§€λŠ” λͺ¨λ₯΄μ§€λ§Œ, λ°˜λ“œμ‹œ ν•΄κ²°ν•  수 μžˆλ‹€λŠ” 믿음? μžμ‹ κ°?이 생겼닀고 ν•΄μ•Όν•˜λ‚˜β€¦ μ•”νŠΌ 그런 게 생겼닀. 였늘의 μ΄μŠˆλ„ μ•½κ°„ 그런 λ¬Έμ œμ˜€λŠ”λ°, κ²°κ΅­ μ°Ύκ³  μ°Ύλ‹€λ³΄λ‹ˆ ν•΄κ²°ν•  수 μžˆμ—ˆλ‹€. μžμ„Έν•œ 건 이 글을 μ°Έμ‘°ν•˜κΈ°!

πŸ“ μš”μ•½ 및 ν•˜λ£¨ 간단 회고

개발이 μ°Έ μž¬λ―Έμžˆλ‹€. μ•Œλ©΄ μ•Œμˆ˜λ‘ 재미있고 더 μž˜ν•˜κ³ μ‹Άκ³  μš•μ‹¬μ΄ λ‚œλ‹€. μ†”μ§νžˆ 윑체적인 ν”Όλ‘œλŠ” μžˆμ§€λ§Œ, 개발 곡뢀λ₯Ό ν•  λ•Œ 정신적인 ν”Όλ‘œλŠ” μƒλŒ€μ μœΌλ‘œ λœν•œ 것 κ°™λ‹€.(ν—›μ†Œλ¦¬μΌ μˆ˜λ„ μžˆλ‹€. γ…Žγ…Žγ…Žγ…Žγ…Ž) κ·Έλž˜λ„ ν™•μ‹€ν•œ 건 맀일 개발 생각이 λ‚˜κ³  맀일 κ°œλ°œμ„ ν•˜κ³  있고 맀일 κ°œλ°œμ„ ν•˜κ³  μ‹Άλ‹€λŠ” 것이닀. λ„ˆλ¬΄ μ„œλ‘λ₯΄μ§€λ§κ³  천천히 λ‚΄κ°€ μ›ν•˜λŠ” λͺ¨μŠ΅μ˜ 삢을 더 μ‹€ν˜„ν•˜λ©΄μ„œ λ‚˜μ•„κ°”μœΌλ©΄ μ’‹κ² λ‹€. 정말 정말 μž˜ν•˜κ³  μžˆλ‹€.

였늘의 μž˜ν•œ 점

  • 거의 쉬지 μ•Šκ³  λͺ°μž…ν•΄μ„œ κ³΅λΆ€ν•œ 점

였늘의 μ•„μ‰¬μš΄ 점

  • κ³„νšν•œλ§ŒνΌ λ‹€ λͺ»ν•œ 점… => μš”μ¦˜ 이게 계속 λ“±μž₯ν•˜λŠ”λ°, μ–΄λ–»κ²Œ κ°œμ„ ν•  수 μžˆμ„κΉŒ?
    • 정말 λ”± ν•  수 μžˆλŠ” κ³„νšλ“€λ§Œ 적어놔 볼까..? λ„ˆλ¬΄ λ¬΄λ¦¬ν•˜μ§€ 말고..?

μ°Έκ³