[TIL] 9월 8일 파일의 컴포넌트화

리액트의 가장큰 장점이 요소들을 각각 컴포넌트화 하는것이다.

스타일하나를 불러올수도 있고, 페이지 전체를 불러올수도 있고, 페이지에 맞게 불러온뒤 그페이지에 맞는 내용들을 작성해 줄수 있다.

기존에 폴더구조를 (container/presenter ) 구조로 변경한 내용을 기반으로 실습을 하였다.

하나의 페이지로 2개의 페이지 만들기 (등록하기, 수정하기)

기존 포트폴리오 과제에서 등록하기 페이지를 구현했다.

이페이지와 동일한 레이아웃을 가지고 있는 수정하기 페이지를 하나더 만들어야 한다.

리액트가 아니면 기존에 있는 코드를 복사 붙여넣기 한다음 버튼을 변경하는 방식으로 했어야 하는데 리액트를 이용하면 그냥 페이지를 불러오고 몇가지 변경사항만 변경하면 2가지 페이지가 생긴다.

폴더구조

먼저 등록하기 페이지의 폴더구조를 보면 src>components>commons>units>board>write 부분에 컨테이너화 했다.

이렇게 컴포넌트화한 파일을 index.js파일에 import 해서 등록하기 페이지를 구현했다.

수정하기 구현하기

수정하기 페이지는 등록하기 페이지와 동일하고 내용만 조금 변경된다.

상단부분에 페이지 제목, 하단부분의 버튼만 변경되면 된다.

등록하기페이지와 동일하게 하기위해서 폴더를 하나 만든다.

[BoardsDetailPage] 안에 edit이라는 폴더를 만들고 그 안에 수정하기 페이지 index.js파일을 만들었다.

폴더구조를 이렇게 만든 이유는 상세보기 페이지에서 등록한 게시글의 Id값을 기억하고 이페이지로 와야해서 폴더구조를 이렇게 만들었다.

(이게 맞는지는 내일 멘토님에게 물어봐야 겠다.)

이제 등록하기와 동일하게 import 해주면 된다.

동일하게 import한후 해야할 작업이 하나 있다.
import만하면 동일한 페이지기 때문에 이름,버튼을 변경해줘야 하는데 그역할을할 함수를 하나 정의해야 한다.

isEdit = {false} 이렇게 정의해줬다.
isEdit이 false 값을 가지면 수정하기 페이지로 이름,버튼을 변경해주어야 한다.
그렇게 하기 위해서 등록하기 페이지에도 isEdit을 선언해준다.

isEdit = {true} 이부분을 등록하기페이지에도 선언해줘서
isEdit = true 값을 가지면 등록하기 페이지로 이동되도록 함수를 선언해준다.

이제 이렇게 되면 write폴더 안에 있는 container, present만 수정해주면 하나의 컴포넌트 페이지로 2가지 페이지 완성이 된다.

container page

container page에서는 2가지만 설정해주면 된다.
상위 폴더에서 isEdit 이라는 함수를 설정해주었기 때문에 여기선 props로 받아온뒤 함수를 present페이지로 내보내 줘야 한다.

props를 정의해주고 isEdit = {props.isEdit} 이렇게 정의해주면 된다.

present page

먼저 상단 페이지 제목부분은 아래와 같이 적어준다.

<FormTitle>{props.isEdit ? "게시물 등록" : "게시물 수정"}</FormTitle>

props.isEdit이 true 값이라면 "게시물 등록"
props.isEdit이 false값이라면 "게시물 수정"

이렇게 작성해주면 된다.

그러면 index.js 작성해놓은 true, false 값을 찾아서 맞는 값으로 페이지가 그려진다.

하단 버튼부분은 조금 다르다.

{!props.isEdit &&<FooterBtn1 onClick={props.onClickModifyBtn} check={props.check}>수정하기<FooterBtn1>
{props.isEdit &&<FooterBtn1 onClick={props.onClickRegister} check={props.check}>등록하기<FooterBtn1>

똑같이 true 값, false 값에 맞춰서 수정하기 버튼, 등록하기 버튼을 선택해서 페이지가 그려진다.

다만 {} 가 태그전체를 감싸고 있는데 이는 각각 다른 클릭 함수를 구현해서 그런거 같다.
(이부분은 내일 멘토님에게 물어봐야 겠다.)

😮‍💨 실습시 느낀점...

오류가 많이나는 부분
실습을 하면서 오류가 정말 많이 발생했다.
주로 오류 상황들을 보면 폴더구조 설정, gql queries 중괄호 누락,오타 등등이 있는거 같다.
폴더구조도 간단하다고 생각했는데 폴더구조를 확실히 이해해야 할거 같고 gql 쿼리작성부분은 단어만 보지말고 꼭 중괄호도 봐야할거 같다.(gql error는 거의 중괄호 문제 였다...)