📒 오늘 공부한 내용
🔍수업목차
[6-1] 다이나믹 라우팅
[6-2] 폴더 구조
[6-3] 실무용 폴더구조(container / presenter)
[6-4] export vs export default
✅ 다이나믹 라우팅 리뷰
다이나믹 라우팅 폴더
- 대괄호가 있는 폴더
- boards/[boardId]
정적라우팅
- boards/boardId
💡 다이나믹 라우팅 시 주의!
다이나믹 라우팅 폴더에 들어갈때는
/boards/qqq이런식으로 url을 입력했다.
그리고 qqq부분에는 게시글 아이디의 어떤 값을 넣어도 boardId 페이지에 접속이 됐다.
하지만 qqq부분에 new를 넣게 되면, boardId 페이지가 아닌 new폴더의 index.js 파일에 접속이 된다.
💡다이나믹 폴더의 boardId 정보를 가지고 오고싶을 때
다이나믹 폴더의 파라미터(boardId)는 router.query 에서 찾아보실 수 있다.
query까지만 입력하시면 boardId 뿐만 아니라 다양한 정보를 얻을 수 있다.
✅ 폴더 구조
서비스가 커지면 커질수록 기능이 많아지기 때문에 폴더가 굉장히 많아지게 된다.
따라서 큰 그룹으로 묶어주면 관련 기능이 모두 해당 폴더 안에 들어있기 때문에 유지보수시 굉장히 유리해진다.
또한 주소 또한 가독성이 좋아진다.
위와 같이 boads의 대분류에 들어간 폴더들은 모두 게시글과 관련있는 페이지,기능 들이다.
따라서 게시글 관련 유지 보수가 필요하다 하시면 해당 폴더에서 바로 찾아볼 수 있다.
💡 게시글을 수정시 주소는 왜 boards/edit이 아닐까?
게시글을 수정할때는 특정 게시글을 수정하게 된다.
따라서 수정 페이지는 new와 다르게 특정 게시글에 대한 정보가 들어가야 한다.
따라서 수정페이지는 특정 게시물 정보를 포함하는 boards/[boardId]/edit 으로 적어줘야 된다.
✅ 실무용 폴더구조(container / presenter)
프로젝트를 만들때 폴더 구조는 굉장히 중요하다.
실무에서 사용하는 폴더 구조는 여러가지 방법이 존재하는데, 이러한 방법들을 패턴이라고 부른다.
리액트에서 사용하는 유명한 패턴으로는 container / presentational 패턴, hooks 패턴, atomic 패턴이 있다.
📝 container / presentational 패턴
container / presentational 패턴이란, 소스코드를 자바스크립트(기능)와 JSX (UI)로 나누는 방법을 의미한다. 여기서 container는 자바스크립트(기능) 부분을 의미하고, presentational은 JSX(UI) 부분을 의미한다.
파일을 나눴어도 실행될 때는 하나로 합쳐져서 실행 되어야 한다.
하나로 합쳐서 실행하는 방법은 부모컴포넌트에 자식컴포넌트를 불러오는 것 이다.
자식컴포넌트인 presenter를 부모 컴포넌트인 container에 불러와 하나로 합쳐 실행
파일은 두개로 나뉘어져 있지만 실행시에는 pages에서 하나로 합쳐져서 실행된다
브라우저로 볼 수 있는 컴포넌트는 pages에 있는 index.js 뿐이기 때문에 하나로 합쳐둔 container를 pages에 가지고 와서 import 해야된다.
📝 props
컴포넌트를 2개로 나누면서 데이터와 기능의 연결고리가 끊어지게 된다.
이를 props가 연결해주게 되며, props란 부모 컴포넌트가 자식 컴포넌트에게 물려주는 변수/함수 를 의미한다. 부모 컴포넌트가 props를 물려줄때는 객체로 묶어서 넘기게 된다.
💡 리액트의 단방향 데이터 흐름
리액트는 데이터 흐름이 단방향 구조다.
데이터 흐름이 단방향 구조라는 것은 props는 부모가 자식에게만 줄 수 있으며, 자식이 부모에게 줄 수 없다는 것을 의미한다.
✅ export vs export default
export
- 중괄호를 사용해서 import 해온다.
- 한 컴포넌트 내에서 여러개를 내보낼 때 사용한다.
- import 해올 때는 export한 이름 그대로 불러와야 된다.
- 한번에 묶어서 import 할 시에는
import * as S from ‘경로’를 이용한다.
export default
- 중괄호 없이 import 해온다.
- import 해올 때 export 한 이름이 아니어도 괜찮다.
