[joDMSoluth] 19/10/02 하루공부

jodmsoluth·2019년 10월 2일
0

하루공부

목록 보기
2/3

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으로 감싸준다.

    ```javascript

    const Signup = () => {
    return (

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

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

ant design 사용

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

4개의 댓글

comment-user-thumbnail
2019년 10월 2일

저두 요새 next.js로 공부하고 있는데 복습하고 좋네요.
혹시 .next에 하위에 있는 폴더나 파일에 대해서 잘 아시나요?
이게 다 필요한 파일들인지 궁금해서요.

1개의 답글
comment-user-thumbnail
2019년 10월 4일

antd는 모바일에서 불편한 부분이 있어서
저는 개인적으로 안쓸 것 같아요 ㅋㅋ,
저는 prop-types보단 typescript가 좋더라구요
좋은 글 잘 읽었습니다. ㅎㅎ

1개의 답글