[React] React 사용하면 좋은 것

비구조분해 할당, 구조분해 할당
class name 동적활용
컴포넌트 별로 sass파일 나누고 관리
sass 네스팅
변수, mixin등의 경우에는 variables.scss, mixin.scss 별도 파일로 분리해서 필요한 .scss 파일에서 import 해서 사용하시면 됩니다.
불린 데이터의 활용(삼항연산자와 &&)
반복되는 코드 map()함수 이용

// footerData.js
// named export (vs. default export)
export const INFO_LIST = [
  {id: 1, content: "도움말"},
  {id: 2, content: "홍보 센터"},
  {id: 3, content: "API"},
  {id: 4, content: "채용정보"},
  {id: 5, content: "개인정보처리방침"},
  {id: 6, content: "약관"},
  {id: 7, content: "위치"},
  {id: 8, content: "인기 계정"},
]

// Footer.js (Footer 컴포넌트)
import { INFO_LIST } from './footerData.js'

return (
  ...
  {INFO_LIST.map(info => {
     return (
       <li key={info.id}>
         <a href="">{info.content}</a>
       </li>
     )
 });

map을 사용할 때는 return되는 jsx요소마다 고유의 key값이 존재해야함
키속성은 제일 바깥에 있는 태그를 부여
값이 변하지 않는 변수는 컴포넌트 밖에서 선언

name속성은 오직 input태그 안에서만 사용가능.
name속성의 값은 value처럼 event.target으로 가져올 수 있음(e.target.name)

a태그와 link태그
a태그는 새로고침하는것처럼 html을 다 받아오지만, link는 컴포넌트만 바꿔줌
link 권장!

import 순서

• 라이브러리 React 관련 패키지 외부 라이브러리
• 컴포넌트 공통 컴포넌트 → 먼 컴포넌트 → 가까운 컴포넌트
• 함수, 변수 및 설정 파일
• 사진 등 미디어 파일(.png)
• css 파일 (.scss)

state값이 불필요한것들 정리( state업데이트는 렌더링을 발생시키기 떄문)

• 부모로부터 전달받는 props
• 시간이 지나도 변하지 않는 값 (UI 변화에 관여하지 않는 값)
• 컴포넌트 안의 다른 state 나 props 로 계산 가능한 값