zeroCho react-NodeBird 2강 공부
NextJS문서참고

NextJS 기본문법

  • NextJS 기본문법

    1. Link
      <Link href='#'><a></a></Link>
  • 특수한 파일

    1. _document.js : html, head, body 등을 담당
    2. _app.js : root 담당(레이아웃)
    3. pages 폴더 : 실제 컴포넌트
    4. _error.js : 배포전에 커스터마이징X, 에러를 담당

리액트

  • 커스텀 훅 :

    export const useInput = (initValue = null) => {
       const [value, setter] = useState(initValue);
       const handler = useCallback(e => {
         setter(e.target.value);
       });
       return [value, handler];
    };
    
    const [id, onChangeId] = useInput("");
    const [nick, onChangeNick] = useInput("");
    const [password, onChangePassword] = useInput("");

    원래는 state와 이벤트핸들러를 따로 생성해주어야 되는데 커스텀 훅으로 위의 코드처럼 리팩토링 할 수 있다.

  • useCallback, memo
    return 안에 props or 자식컴포넌트로 받는 함수들은 useCallback으로 감싸준다.

    const Signup = () => {
     return (
         <input value={id} onChange={onChangeId}/>
     )
    }

    위의 코드에서 onChangeId는 state(Id)가 바뀔때마다 props에 들어간 함수(onChangeId)가 새로 생성됨, 생성된 함수들은 각기 다른 객체가 되므로 리렌더링이 된다.

  • prop-types (짧은 코드비용으로 견고한 프로그램 가능하다)

ant design 사용

  • 문서에 아주 친절하게 설명이 되어있어서 비교적 쉽게 사용할 수 있었다. 앞으로 퍼블리싱 할 때 자주 이용할 것 같음
  • 실무에서는 디자인을 요소검사해서 클래스를 찾은 후 커스텀한다고 한다.