[React] 크롬 확장프로그램과 Q&A, 프로필 페이지 만들기, 회원가입 페이지 만들기(커스텀 훅)

Yuri Lee·2022년 5월 16일
0

이 글은 인프런 제로초님의 '[리뉴얼] React로 NodeBird SNS 만들기' 를 바탕으로 정리한 내용입니다.

크롬 확장프로그램과 Q&A

noreferrer , noopener

<a href="https://velog.io/@leyuri" target="_blank" rel="noreferrer noopener">Made by yuri</a>

noreferrer , noopener : 이 2개를 이용해서 새창을 누가 열었는지 정보를 없애버린다. 그래서 이걸 꼭 붙여주라고 한다. 보안을 지킬 수 있기 때문.

크롬 확장프로그램 추천

  • react-developer-tools,
  • Redux DevTools
  • MobX Developer Tools

component tab 로 들어가보자. element tab 에는 실제로 렌더링된 태그들이 보여서 찾기 힘들다. 하지만 컴포넌트 탭에 들어가면 만들었던 컴포넌트를 그대로 볼 수 있다. 보기가 편해진다.


하이라이트를 설정할 수 있다. (리렌더링 된 요소에 한해서) 리렌더링이 된다고 해서 성능에 문제가 있는 건 아니다. 리렌더링 자체는 내부가 실행되는 것이고 그 중에서도 return 된 부분에서 달라진게 있으면 그 부분만 다시 그리는 것이다. 그래도 많이 안되게 조절해야 한다. 그만큼 함수가 많이 사용될 수 있기 때문.

프로필 페이지 만들기

오픈소스의 사용자가 많으면 버그가 적다.

FollowList.propTypes = {
  header: PropTypes.string.isRequired,
  data: PropTypes.array.isRequired,
};

→ props 데이터를 넘겨줄 때 제대로 넘겨줬는지 검사하는 것이다. header가 string이 맞는지, data가 배열이 맞는지를 검사해준다.

컴포넌트는 잘게잘게 쪼갤 수록 좋다. 옛날에는 컨테이너로부터 계속 넘겨줘야 했기 때문에 약간의 부담이 있었다. 하지만 이제 컨테이너 안에 프레젠터 프레젠터로 깊게 들어있어도, hooks 가 있으므로 바로 받아올 수 있으므로 덜 부담스럽다. 더 적극적으로 컴포넌트를 쪼갤 수 있다.

보통 백줄이 넘어가면 분리하는 편이다.

회원가입 페이지 만들기(커스텀 훅)

중복되는 것들을 커스텀 훅으로 만들어 줄 수 있다.

const [id, setId] = useState('');
    const onChangeId = useCallback((e) => {
        setId(e.target.value)
},[])

변수명의 경우 더 길더라도 의미있게 짓는 것에 더 집중하자.

hooks을 사용할 수 있는 조건은?
→ 반복문이나 조건문 함수 안에서는 안되고 무조건 컴포넌트 안에서 된다. 하지만 유일한 예외가 커스텀 훅이다. hooks 폴더를 만들고 파일 생성. (userInput)

import { useState, useCallback } from 'react';

export default (initialValue = null) => {
    const [value, setValue] = useState(initialValue);
    const handler = useCallback((e) => {
        setValue(e.target.value)
    }, [])
    return [value, handler]
}

중복되는 부분을 넣자. [value, handler] 이 합쳐져서 리턴된다.

너무 최적화에 미리 집착할 필요는 없다. 이정도면 출시해도 되겠다! 할때 늦지 않다. 미리 최적화하지 말자....!!

사용자 인풋 받는 것은 여러번 체크하는 게 좋다. 프론트에서도, 서버에서도!

느낀점

처음부터 최적화에 집착할 필요는 없음!

profile
Step by step goes a long way ✨

0개의 댓글