🌐 React Best Practice

@winuss Β· November 24, 2022 Β· 6 min read

λŒ€μ„Έ ν”„λ‘ νŠΈ 라이브러리인 λ¦¬μ—‘νŠΈλ‘œ κ°œλ°œμ„ ν•˜κΈ°μ— μ•žμ„œ 가급적이면 κΌ­ μ§€μΌœμ•Όν•  뢀뢄을듀 μ •λ¦¬ν•˜μ˜€μŠ΅λ‹ˆλ‹€. μŠ΅κ΄€μ μœΌλ‘œ μ•„λž˜ λ‚΄μš©λ“€μ€ λ°˜λ“œμ‹œ μˆ™μ§€ν•©μ‹œλ‹€!

ν•¨μˆ˜ν˜• μ»΄ν¬λ„ŒνŠΈμ™€ 훅을 μ‚¬μš©

React ν•¨μˆ˜ μ»΄ν¬λ„ŒνŠΈμ™€ 훅은 ν΄λž˜μŠ€μ— λΉ„ν•΄ 더 κ°„κ²°ν•˜κ³  읽기 μ‰¬μš΄ μ½”λ“œλ₯Ό μƒμ„±ν•˜λ―€λ‘œ 더 자주 μ‚¬μš©ν•΄μ•Ό ν•©λ‹ˆλ‹€.

μƒνƒœμ‚¬μš© ν”Όν•˜κΈ°

React μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ λΉŒλ“œν•  λ•Œ μƒνƒœλ₯Ό 많이 μ‚¬μš©ν• μˆ˜λ‘ μ•± μ „μ²΄μ—μ„œ 더 λ§Žμ€ 데이터λ₯Ό 좔적해야 ν•˜λ―€λ‘œ μƒνƒœλ₯Ό μ΅œλŒ€ν•œ μ‚¬μš©ν•˜μ§€ λ§ˆμ‹­μ‹œμ˜€. μƒνƒœ μ‚¬μš©μ„ μ΅œμ†Œν™”ν•˜λŠ” ν•œ 가지 방법은 ν•„μš”ν•  λ•Œλ§Œ μ„ μ–Έν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄ APIμ—μ„œ μ‚¬μš©μž 데이터λ₯Ό κ°€μ Έμ˜€λŠ” 경우 κ°œλ³„ 속성을 μ €μž₯ν•˜λŠ” λŒ€μ‹  전체 μ‚¬μš©μž 개체λ₯Ό μƒνƒœμ— μ €μž₯ν•©λ‹ˆλ‹€.

//κ°œλ³„ 속성 μƒνƒœ
const [username, setusername] = useState('')
const [password, setpassword] = useState('')

//전체 μ‚¬μš©μž 개체
const [user, setuser] = useState({})

λ™μΌν•œ κ΅¬μ„±μš”μ†Œμ™€ κ΄€λ ¨λœ νŒŒμΌμ„ ν•˜λ‚˜μ˜ 폴더에 정리

Navbar ꡬ성 μš”μ†Œλ₯Ό μƒμ„±ν•˜λŠ” 경우 Navbar ꡬ성 μš”μ†Œ 자체, μŠ€νƒ€μΌ μ‹œνŠΈ, ꡬ성 μš”μ†Œμ— μ‚¬μš©λœ 기타 JavaSript 및 μžμ‚° νŒŒμΌμ„ ν¬ν•¨ν•˜λŠ” navbarλΌλŠ” 폴더λ₯Ό μƒμ„±ν•©λ‹ˆλ‹€.

인덱슀 ν‚€λ₯Ό Props Key둜 μ‚¬μš©ν•˜μ§€ μ•ŠκΈ°

μ•„λž˜μ™€ 같이 인덱슀 ν‚€λ₯Ό μ‚¬μš©ν•˜λ©΄ λ•Œλ•Œλ‘œ μž‘λ™ν•˜μ§€λ§Œ 인덱슀λ₯Ό ν‚€λ‘œ μ‚¬μš©ν•˜λ©΄ 특히 λͺ©λ‘μ΄ 변경될 κ²ƒμœΌλ‘œ μ˜ˆμƒλ˜λŠ” 경우 λ¬Έμ œκ°€ λ°œμƒν•  수 μžˆμŠ΅λ‹ˆλ‹€.

//인덱슀 ν‚€λ₯Ό μ‚¬μš© (X)
const Items = () => {
 const arr = ["item1", "item2", "item3", "item4", "item5"];
 return (
   <>
     {arr.map((elem, index) => {
       <li key={index}>{elem}</li>;
     })}
   </>
 );
};

κ°€λŠ₯ν•œ 경우 div λŒ€μ‹  쑰각을 μ„ νƒν•˜μ‹­μ‹œμ˜€.

λ₯Ό μ‚¬μš©ν•˜λ©΄ DOM 크기가 μ¦κ°€ν•©λ‹ˆλ‹€. 특히 νƒœκ·Έ λ˜λŠ” DOM λ…Έλ“œκ°€ λ§Žμ„μˆ˜λ‘ μ›Ήμ‚¬μ΄νŠΈμ— 더 λ§Žμ€ λ©”λͺ¨λ¦¬κ°€ ν•„μš”ν•˜κ³  λΈŒλΌμš°μ €κ°€ μ›Ήμ‚¬μ΄νŠΈλ₯Ό λ‘œλ“œν•˜λŠ” 데 더 λ§Žμ€ μ „λ ₯을 μ‚¬μš©ν•˜κΈ° λ•Œλ¬Έμ— λŒ€κ·œλͺ¨ ν”„λ‘œμ νŠΈμ—μ„œ λ”μš± κ·Έλ ‡μŠ΅λ‹ˆλ‹€. 이둜 인해 νŽ˜μ΄μ§€ 속도가 λŠλ €μ§€κ³  잠재적으둜 μ‚¬μš©μž κ²½ν—˜μ΄ μ €ν•˜λ  수 μžˆμŠ΅λ‹ˆλ‹€. λΆˆν•„μš”ν•œ
νƒœκ·Έλ₯Ό μ œκ±°ν•˜λŠ” ν•œ 가지 μ˜ˆλŠ” 단일 μš”μ†Œλ₯Ό λ°˜ν™˜ν•  λ•Œ νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜μ§€ μ•ŠλŠ” κ²ƒμž…λ‹ˆλ‹€.
const Button = () => {
 return <button>Display</button>;
};

λͺ…λͺ… κ·œμΉ™ μ€€μˆ˜

ꡬ성 μš”μ†Œ 이름을 지정할 λ•Œ 항상 PascalCaseλ₯Ό μ‚¬μš©ν•˜μ—¬ ꡬ성 μš”μ†Œκ°€ μ•„λ‹Œ λ‹€λ₯Έ JSX 파일과 ꡬ별해야 ν•©λ‹ˆλ‹€. (예: TextField, NavMenu 및 SuccessButton) handleInput() λ˜λŠ” showElement()와 같은 React ꡬ성 μš”μ†Œ 내뢀에 μ„ μ–Έλœ ν•¨μˆ˜μ—λŠ” camelCaseλ₯Ό μ‚¬μš©ν•˜μ‹­μ‹œμ˜€.

반볡적인 μ½”λ“œ ν”Όν•˜κΈ°

μ€‘λ³΅λœ μ½”λ“œλ₯Ό μž‘μ„±ν•˜κ³  μžˆλ‹€λŠ” 것을 μ•Œκ²Œ 되면 μž¬μ‚¬μš©ν•  수 μžˆλŠ” ꡬ성 μš”μ†Œλ‘œ λ³€ν™˜ν•˜μ‹­μ‹œμ˜€.

Props에 객체 ꡬ쑰화 μ‚¬μš©

props 객체λ₯Ό μ „λ‹¬ν•˜λŠ” λŒ€μ‹  객체 ꡬ쑰화λ₯Ό μ‚¬μš©ν•˜μ—¬ props 이름을 μ „λ‹¬ν•˜μ‹­μ‹œμ˜€. μ΄λ ‡κ²Œ ν•˜λ©΄ μ‚¬μš©ν•  λ•Œλ§ˆλ‹€ props 객체λ₯Ό μ°Έμ‘°ν•  ν•„μš”κ°€ μ—†μŠ΅λ‹ˆλ‹€.

//props κ·ΈλŒ€λ‘œ μ‚¬μš©
const Button = (props) => {
 return <button>{props.text}</button>;
};

//객체 ꡬ쑰화 μ‚¬μš©
const Button = ({text}) => {
 return <button>{text}</button>;
};

맡을 μ‚¬μš©ν•˜μ—¬ λ™μ μœΌλ‘œ λ°°μ—΄ λ Œλ”λ§

map()을 μ‚¬μš©ν•˜μ—¬ λ°˜λ³΅λ˜λŠ” HTML 블둝을 λ™μ μœΌλ‘œ λ Œλ”λ§ν•©λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄ map()을 μ‚¬μš©ν•˜μ—¬

  • νƒœκ·Έμ˜ ν•­λͺ© λͺ©λ‘μ„ λ Œλ”λ§ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

    const Items = () => {
       const arr = ["item1", "item2", "item3", "item4", "item5"];
       return (
         <>
           {arr.map((elem, index) => {
             <li key={elem+index}>{elem}</li>;
           })}
         </>
       );
      };

    각 React ꡬ성 μš”μ†Œμ— λŒ€ν•œ ν…ŒμŠ€νŠΈ μž‘μ„±

    μƒμ„±ν•œ ꡬ성 μš”μ†Œμ— λŒ€ν•œ ν…ŒμŠ€νŠΈλ₯Ό μž‘μ„±ν•˜λ©΄ 였λ₯˜ κ°€λŠ₯성이 μ€„μ–΄λ“­λ‹ˆλ‹€. ν…ŒμŠ€νŠΈλ₯Ό 톡해 ꡬ성 μš”μ†Œκ°€ μ˜ˆμƒλŒ€λ‘œ μž‘λ™ν•˜λŠ”μ§€ ν™•μΈν•©λ‹ˆλ‹€. React의 κ°€μž₯ 일반적인 ν…ŒμŠ€νŠΈ ν”„λ ˆμž„μ›Œν¬ 쀑 ν•˜λ‚˜λŠ” Jest이며 ν…ŒμŠ€νŠΈλ₯Ό μ‹€ν–‰ν•  수 μžˆλŠ” ν™˜κ²½μ„ μ œκ³΅ν•©λ‹ˆλ‹€.


    React Is a Powerful Tool, But You Must Follow Certain Practices

    ReactλŠ” μ‚¬μš© 방법 μΈ‘λ©΄μ—μ„œ λ‹€μ†Œ μœ μ—°ν•˜μ§€λ§Œ νŠΉμ • 사둀λ₯Ό λ”°λ₯΄λ©΄ κ²½ν—˜μ„ μ΅œλŒ€ν•œ ν™œμš©ν•˜λŠ” 데 도움이 λ©λ‹ˆλ‹€.

  • @winuss
    Hello :) Developer notes!