수업목표
-컴포넌트의 재사용!
내 생각
리액트에선 컴포넌트로 하나의 파일을 나누는 방식을 채택했다.
다른 라이브러리는 배워보지 않아서 모르겠다.
리액트의 이런방식이 지금 배우는 과정에서는 매우 불편하게 느껴지지만
프로젝트의 사이즈가 커지고 복잡도가 올라가면
유지보수 방면에서는 매우 편리 할 것 같다고 생각한다.
style 이 이상하면 style파일로 가면되고 query가 이상하다면 query파일로 가면
이전의 방식보단 훨씬 가독성이 있을 것 같다. 연결만 능숙하게 한다면..
더 나아가 전 페이지에 공통적으로 쓰이는 기능 혹은 UI들을 컴포넌트화 해서 사용하면
굉장히 빠르고 편리하게 사용할 것 같다.
CRUD 중 수정을 배워보자.
crud중 U에 해당하는 수정을 배워보았다.
수정도 등록처럼 데이터를 등록해달라고 요청하는 것이다.
다만 그 등록이 원래의 데이터의 내용을 수정해서 새로 등록하는 것이라는게
다른점이다. 게시물의 아이디는 같지만 내용만 수정해서 재요청 하는것이라고 보면 된다.
수정요청의 방법.
수정api를 요청하는 것은 생각보다 간단하다.
수정할 게시글 혹은 상품의 api id를 가져와 인자로 주고
게시글을 등록하듯이 코드를 짜면 된다.
한 파일에서 모든것을 하면 매우 간단하고 쉽다 하지만 리액트를 사용하는 이상
한 파일에서 사용할 일은 거의 없을 것 같다.
컴포넌트를 나누면서 점점 어떤 것을 업데이트 할지 정할때 필요한
아이디, 번호 등을 가져오는게 힘들것으로 보인다.
라우터를 이용하면 될 것 같다. 아직 라우터에 대한 지식이 부족해 이해가 어렵다.
다음엔 라우터에 대해서만 포스팅 해보겠다.
내 생각에 키 포인트는 아이디를 어디서 어떤 방식으로 가져오는지가 중요할 것 같다.
컴포넌트의 재사용성
수업을 들으면서 아..이제 고통이 시작이구나..라고 느꼇던 순간이 여태 딱 2번있다.
바로 컴포넌트의 활용을 배울때와 타입스크립트에 대해 배울때였다.
타입스크립트 그 자체만으로는 어렵지 않지만 컴포넌트의 활용과 동시에
타입스크립트를 사용하려니 정말 힘들었다.
어쨋든 리액트를 사용하고 배우기로 한 이상 열심히 배워야하니 대략적인
사용법을 배워보자.
이전에 컴포넌트를 나누는 방법에 대해서는 배운적이 있엇다.
이번에는 그 컴포넌트를 재사용!! 하는 방법을 배울것이다.
일반적으로 페이지컴포넌트를 만들때 4개의 파일로 쪼개서
만든다. Container , Presenter , Queries , Styles
우리는 이중 Presenter를 재사용 해 볼 것이다.
컴포넌트 재사용의 예시
만약 게시판등록 페이지UI를 만들었고, 이제는 수정페이지를 만들어야 한다고 생각하자.
그런데 디자인 시안을 보니 수정페이지의 UI가 등록 페이지의 UI와 매우 유사하고
바뀐점은 게시판 등록이 게시판 수정으로 밖에 바뀐게 없다면,
우리는 게시판 등록에서 사용한 UI컴포넌트를 재사용할 수 있다.
나의 파일 저장법으론 NewBoard.presenter.js 일 것이다.
이 파일을 board/new/index와 board/edit/index에 같이 연결해준다.
(presenter를 직접 연결하지 않고 Container에 연결해야 한다!!!)
/*
그리고 isEdit(변수명은 상관없다.)라는 변수를 각각 만들고
new는 false edit는 true로 각각 지정한다.
이 isEdit라는 변수를 props로 넘기고 container파일에서 받아준다.
그리고 다시 container에서 presenter로 props를 이용해 넘겨주는 것이다.
이렇게 해서 presenter에 isEdit란 변수가 도착했다면 이제는 조건을 걸 시간이다.
보내준 isEdit를 활용하는 법
이제 presenter에 조건을 걸어보자.
여기서 나는 삼항연산자를 이용할 것이다.
만약 <Title>게시물 등록</Title>
이런식으로 마크업을 했다면 아래와 같이 바꿔준다.
<Title>{props.isEdit ? "게시물수정" : "게시물등록"}</Title>
말로 풀어보자면 isEdit가 true라면 게시물 수정이 출력되고 false라면 게시물 등록이 출력되는것이다.
이전에 각 페이지 컴포넌트에서 isEdit를 등록페이지는 false 수정페이지는 true로 해줬으니
페이지를 실행시키면 각 목적에 맞는 값이 출력되게 된다.
이 방식은 단순히 텍스트가아닌 함수,즉 이벤트 핸들링에도 적용할 수 있다.
위 상황에선 버튼을 누르면 페이지마다 각기 다른 함수가 작동하도록 해야하는 것이다.
onClick = {[props.isEdit ? onClickEdit : onClickNew}
이런식으로 활용한다.
p.s이렇게 props를 여러번 보내는것을 프롭스 드릴링 이라고 한다.
