회원가입 페이지를 만드는 과정

참고 사이트 : https://thebook.io/080203/ch13/02/04/

학습하며 알게된 리액트 지식을 정리한 글입니다.

코드리뷰

• link 코드는 component들을 모아둔 폴더의 로그인/회원가입 form style들을 지정한 곳에서 <Link to=""></Link> 태그로 감싸주었다.

하나의 form에서 하나의 page에만 스타일 적용하는 방법

• 나는 로그인 페이지에는 nickname을 넣지 않길 원했고, 회원가입 페이지에는 nickname을 추가하길 원했다.

이럴 때에는 type 변수에 원하는 페이지를 처리해주면 된다.

 {type === 'register' && (  // 모든 페이지에 적용하고 싶다면 이 라인을 지우면 된다. 
      <StyledInput
          autoComplete="nickname"
          name="nickname"
          placeholder="닉네임"
          onChange={onChange}
          value={form.nickname}
        /> )}             // 이 라인도!

Header의 적용

• Header를 적용하기 위해서, import해줬는데 warning이 발생한다.

To ignore, add // eslint-disable-next-line to the line before. 

eslint 플러그인을 설치해도 문제가 해결되지 않는다…

npm i eslint-plugin-react --save 

따로 App.js에서 HeaderLayOut.js를 Routes 태그로 연결하면 Header가 나타나는데, 왜 내부에서 import는 안되는 건지 잘 모르겠다..!

그리고 컴포넌트들을 이미 import 시킨 페이지에 한해서는 App.js에서도 Header가 적용되지 않는다. 코드를 더 뜯어봐야할 것 같다.

꺠짐 현상

• 페이지 안에 내용물이 들어나면 style들이 깨짐 현상이 나타난다. 자연스러운 스크롤, 끊김없는 스크롤 페이지를 만들려면 어떻게 해야할지 연구해볼 필요가 있다.
• 이것이 늘 어려운데, position에 따라 달라진다. 이게 내 노트북에서는 잘 보이는데 다른 노트북에서 깨지는 현상을 몇 번 본 적이 있다보니 참 예민하다. 이래서 협업이 중요하다..!