profile
Front-end developer πŸ‘©β€πŸ’»βœ
post-thumbnail

React의 MVP

κ°œλ°œμžλŠ” 항상 무엇을 λ§Œλ“ λ‹€. κ·Έλ ‡λ‹€λ©΄ μ–΄λ–»κ²Œ λ§Œλ“€μ–΄μ•Ό ν• κΉŒ?λ§Œλ“€λ‹€λ³΄λ©΄ 더 잘 λ§Œλ“€κ³  μ‹Άκ³ , κΈ°λŠ₯듀을 더 μΆ”κ°€ν•˜κ³  μ‹Άκ³ , μ œκ³΅ν•˜κ³  μ‹Άκ³ ... λΆ„λͺ… μš•μ‹¬μ΄ λ‚˜λŠ”κ²Œ 사싀이닀.이런 μš•μ‹¬λ“€μ„ μ±„μš°κΈ° μœ„ν•΄ λ§Žμ€ 것듀을 λ‹΄μœΌλ €κ³  λ…Έλ ₯ν•˜λ©΄...? μ•ˆλœλ‹€! μ–΄λ–€ μ œν’ˆμ„ λ§Œλ“€ λ•ŒλŠ” κ·Έ

2022λ…„ 6μ›” 8일
Β·
0개의 λŒ“κΈ€
Β·
post-thumbnail

[React_error] react hook "useState" is called conditionally.

React Custom Hook (useTabs)을 λ§Œλ“€λ˜ 도쀑 μœ„μ™€ 같은 μ—λŸ¬λ₯Ό λ§Œλ‚¬λ‹€..! > μ—λŸ¬ μ½”λ“œ 이 μ€€μˆ˜ν•΄μ•Ό ν•  두가지 κ·œμΉ™ 1) μ΅œμƒμœ„(at the Top Level)μ—μ„œλ§Œ 을 ν˜ΈμΆœν•΄μ•Ό ν•œλ‹€. 반볡문, 쑰건문 ν˜Ήμ€ μ€‘μ²©λœ ν•¨μˆ˜ λ‚΄μ—μ„œ 을 호좜 ν•˜λ©΄ μ•ˆλœλ‹€. λŒ€μ‹  이 μ‹€ν–‰λ˜κΈ° 전에 항상 ν•¨μˆ˜μ˜ μ΅œμƒμœ„(at the top level)μ—μ„œ...

2022λ…„ 3μ›” 2일
Β·
0개의 λŒ“κΈ€
Β·
post-thumbnail

Context API

Context API

2022λ…„ 2μ›” 27일
Β·
0개의 λŒ“κΈ€
Β·
post-thumbnail

μ»€μŠ€ν…€ Hooks 생성

μ»΄ν¬λ„ŒνŠΈλ₯Ό λ§Œλ“€λ‹€λ³΄λ©΄, μ’…μ’… λ°˜λ³΅λ˜λŠ” λ‘œμ§λ“€μ΄ λ°œμƒν•œλ‹€.\-> ex) input 을 κ΄€λ¦¬ν•˜λŠ” μ½”λ“œλŠ” 자주 μž‘μ„±ν•  수 μžˆλŠ” μ½”λ“œμ΄λ‹€. \-> input을 κ΄€λ¦¬ν•˜λ €λ©΄ e.target μ•ˆμ— λ“€μ–΄ μžˆλŠ” nameκ°’μ΄λž‘valueλ₯Ό μ½μ–΄μ„œ μ°Έμ‘°ν•΄μ„œ μ–΄λ–€ μƒˆλ‘œμš΄ μƒνƒœλ₯Ό μ„€μ •ν•΄μ•Ό 함

2022λ…„ 2μ›” 25일
Β·
0개의 λŒ“κΈ€
Β·
post-thumbnail

useReducer

이전에 μ»΄ν¬λ„ŒνŠΈ μƒνƒœλ₯Ό μ—…λ°μ΄νŠΈ ν•  λ•Œμ—λŠ” useStateμ‚¬μš©ν•΄μ„œ μƒˆλ‘œμš΄ μƒνƒœλ₯Ό μ„€μ •ν–ˆλ‹€.useState말고, useReducerλΌλŠ” Hook을 μ‚¬μš©ν•΄μ„œ μƒνƒœλ₯Ό μ—…λ°μ΄νŠΈ ν•  수 μžˆλ‹€.useState\->μ„€μ •ν•˜κ³  싢은 λ‹€μŒμƒνƒœλ₯Ό 직접 μ§€μ •ν•΄μ£ΌλŠ” λ°©μ‹μœΌλ‘œ μƒνƒœλ₯Ό μ—…λ°μ΄νŠΈ.

2022λ…„ 2μ›” 25일
Β·
0개의 λŒ“κΈ€
Β·
post-thumbnail

React.memo

μ»΄ν¬λ„ŒνŠΈμ—μ„œ λ¦¬λ Œλ”λ§ 뢈 ν•„μš”ν•  λ•Œ 이전에 λ Œλ”λ§ ν–ˆλ˜ κ²°κ³Όλ₯Ό μž¬μ‚¬μš© ν•  수 있게 ν•˜λŠ” 방법.\-> React.memo ν•¨μˆ˜ μ‚¬μš©ν•˜λ©΄ μ»΄ν¬λ„ŒνŠΈμ˜ λ¦¬λ Œλ”λ§ μ„±λŠ₯ μ΅œμ ν™”λ₯Ό 해쀄 수 μžˆλ‹€.μ»΄ν¬λ„ŒνŠΈμ˜ props κ°€ λ°”λ€Œμ§€ μ•Šμ•˜λ‹€λ©΄, λ¦¬λ Œλ”λ§μ„ λ°©μ§€ν•˜μ—¬ μ»΄ν¬λ„ŒνŠΈμ˜ λ¦¬λ Œλ”λ§ μ„±λŠ₯

2022λ…„ 2μ›” 25일
Β·
0개의 λŒ“κΈ€
Β·
post-thumbnail

useCallback

useMemo 와 λΉ„μŠ·ν•œ HookuseMemo λŠ” νŠΉμ • 결과값을 μž¬μ‚¬μš© ν•  λ•Œ μ‚¬μš©ν•˜λŠ” 반면, useCallback 은 νŠΉμ • ν•¨μˆ˜λ₯Ό μƒˆλ‘œ λ§Œλ“€μ§€ μ•Šκ³  μž¬μ‚¬μš©ν•˜κ³  싢을 λ•Œ μ‚¬μš©.App.jsμ—μ„œ onCreate, onRemove, onToggle\-> μœ„ ν•¨μˆ˜λ“€μ€ μ»΄ν¬λ„ŒνŠΈ

2022λ…„ 2μ›” 25일
Β·
0개의 λŒ“κΈ€
Β·
post-thumbnail

useMemo

μ„±λŠ₯ μ΅œμ ν™”λ₯Ό μœ„ν•˜μ—¬ 이 전에 μ—°μ‚°λœ 값을 useMemoλΌλŠ” Hook 을 μ‚¬μš©ν•˜μ—¬ μž¬μ‚¬μš©.μ„±λŠ₯을 μ΅œμ ν™” ν•΄μ•Ό ν•˜λŠ” μƒν™©μ—μ„œ μ‚¬μš©.νŠΉμ • 값이 λ°”κΌˆμ„λ•Œλ§Œ νŠΉμ • ν•¨μˆ˜ μ‹€ν–‰ν•΄μ„œ 연산을 ν•˜λ„λ‘ 처리.μ›ν•˜λŠ” 값이 λ°”λ€Œμ§€ μ•Šμ•˜λ‹€λ©΄, λ¦¬λ Œλ”λ§ν•  λ•Œ μ˜ˆμ „μ— λ§Œλ“€μ–΄ λ†¨λ˜ 값을 μž¬μ‚¬μš©ν• 

2022λ…„ 2μ›” 24일
Β·
0개의 λŒ“κΈ€
Β·
post-thumbnail

useEffect

useEffect λΌλŠ” Hook 을 μ‚¬μš©ν•˜λ©΄!λ§Œλ“  μ»΄ν¬λ„ŒνŠΈκ°€ 마운트 됐을 λ•Œ (처음 λ‚˜νƒ€λ‚¬μ„ λ•Œ)μ–Έλ§ˆμš΄νŠΈ 됐을 λ•Œ (μ‚¬λΌμ§ˆ λ•Œ, μ‚­μ œλ  λ•Œ) μ—…λ°μ΄νŠΈ 될 λ•Œ (νŠΉμ • propsκ°€ λ°”λ€” λ•Œ) νŠΉμ • μž‘μ—…μ„ μ²˜λ¦¬ν•  수 μžˆλ‹€.πŸ“μ²« 번째 νŒŒλΌλ―Έν„° : ν•¨μˆ˜ 등둝두 번째 νŒŒλΌλ―Έν„°

2022λ…„ 2μ›” 24일
Β·
0개의 λŒ“κΈ€
Β·
post-thumbnail

useRef

htmlκ³Ό jsλ₯Ό μ‚¬μš©ν•  λ•ŒλŠ” νŠΉμ •DOM선택해야 ν•˜λŠ” 상황에 document.getElementbyId() querySelector() 같은 DOM selector을 μ‚¬μš©ν•΄μ„œ 선택함.reactλ₯Ό μ‚¬μš©ν•˜λŠ” ν”„λ‘œμ νŠΈμ—μ„œλ„ 가끔씩 DOM을 직접 선택해야 ν•˜λŠ” 상황 λ°œμƒν•  수

2022λ…„ 2μ›” 24일
Β·
0개의 λŒ“κΈ€
Β·
post-thumbnail

useState

React 16.8 μ΄μ „μ—μ„œλŠ” ν•¨μˆ˜ν˜• μ»΄ν¬λ„ŒνŠΈμ—μ„œλŠ” μƒνƒœλ₯Ό 관리할 수 μ—†μ—ˆλ‹€.κ·ΈλŸ¬λ‚˜ React 16.8μ—μ„œ hooks λΌλŠ” κΈ°λŠ₯λ„μž…μœΌλ‘œ 인해 ν•¨μˆ˜ν˜• μ»΄ν¬λ„ŒνŠΈμ—μ„œλ„ μƒνƒœλ₯Ό 관리할 수 있게 λ˜μ—ˆλ‹€~!λ¦¬μ—‘νŠΈμ—μ„œ useStateλΌλŠ” ν•¨μˆ˜ λΆˆλŸ¬μ˜€λŠ” 것.useState μ‚¬μš©ν•΄μ„œ

2022λ…„ 2μ›” 24일
Β·
0개의 λŒ“κΈ€
Β·
post-thumbnail

[React_error] "Module not found: Error: Can't resolve 'react-router-dom"

React-error

2021λ…„ 12μ›” 24일
Β·
0개의 λŒ“κΈ€
Β·