INDEX
다이나믹 라우팅 리뷰
폴더 구조
Nullish-coalescing
실무용 폴더 구조(container / presenter)
- container/presentational 패턴(유명한 고전 방식)
-> 자바스크립트/html(JSX)부분 나누자 - 게시판
props
- props를 내려주기_부모 컴포넌트
- props 받아오기
- react의 단방향 데이터 흐름
export vs export default
atomic 패턴-> 부품을 조금 더 체계화해보자!
hooks 패턴 => use로 시작하는 애들 기반으로 폴더 만들자!(최신) - 중고마켓
잘하는 개발자 : 유지, 보수를 하기 쉽게. 다른 사람이 읽어도 이해하기 쉬워야 한다. 만든 사람이 다른 사람을 위해서 더 쉽게! 70줄, 40줄 짜리 코드를 모아서 합치기 쉽게끔. 효율적인 프로젝트
주소를 만드는 일반적인 규칙(rest-ful과 흡사)
게시글
목록에 관련된 주소 : 목록: /boards
등록에 관련된 주소 : 등록: /boards/new
상세보기 : /boards/[boardId]
수정하기 : /boards/edit ? 몇번의 게시글 수정할지 번호가 있어야 함.(27?54?qqq라는id의 게시글?) 통일된 규칙이 필요함. /boards/[boardId]/edit(상세보기에서 수정하자)
다이나믹 라우팅 리뷰
대괄호가 있는 [폴더] = 다이나믹 라우팅 폴더,
대괄호가 없는 폴더 = 정적 라우팅 폴더
💡다이나믹 라우팅시 주의점
-> 다이나믹 라우팅 폴더에 들어갈 때 url 입력 /boards/qqq,
qqq부분에는 게시글 아이디의 어떤 값을 넣어도 boardId 페이지에 접속됐다.
하지만 qqq부분에 new를 넣게 되면 boardId가 아닌 new폴더의 index.js 파일에 접속하게 된다.
💡다이나믹 폴더의 boardId 정보를 가지고 오고 싶을 때
-> 다이나믹 폴더의 파라미터(boardId)는 router.query에서 찾아볼 수 있다.
query까지만 입력하면 boardId뿐만 아니라 다양한 정보를 얻을 수 있다.
query는 dynamic router의 파라미터를 포함한 조회가 가능한 정보를 담은 객체.
폴더 구조
폴더 구조를 잘 정리하자!
사실 폴더 구조는 어떻게 잡아도 괜찮은데,
서비스의 규모가 커졌을 경우는 다르다.
서비스의 규모가 커질수록 기능은 많아지고 폴더가 굉장히 많아진다.
따라서 큰 그룹으로 묶어주면 관련 기능이 모두 해당 폴더 안에 들어있기 때문에 유지보수에 굉장히 유리해주고 주소 또한 가독성이 좋아진다.
큰 그룹으로 묶어주었기 때문에 해당 주소의 내용은 모두 큰 그룹에 관련된 페이지임을 바로 알아차릴 수 있다.
위의 board또한 이의 예시로
위와 같이 boards의 대분류에 들어간 폴더들은 모두 게시글과 관련이 있는 페이지, 기능이다.
따라서 게시글 관련 유지보수가 필요하면 해당 폴더에서 바로 찾아볼 수 있다.
💡게시글 수정시 주소가 boards/edit이 아닌 이유?
-> 게시글 수정 시에는 특정 게시글을 수정하게 된다.
따라서 수정 페이지는 new 와 다르게 특정 게시글에 대한 정보가 들어가야 한다.
그래서 수정 페이지는 특정 게시물 정보를 포함하는 boards/[boardId]/edit으로 적어야.
💡이미지 경로 입력 시 주의점
이미지를 가지고 올 때 public폴더에 담긴 이미지를 가져온다.
그래서 이미지 경로를 설정할 때
Nullish-coalescing
옵셔널 체이닝처럼 많이 사용하는 것은 아니지만, null과 undefined일때만 렌더해주는 연산자
💡ES문법에 대해 알아보자.
ECMA Script , 자바스크립트를 표준화시킨 문법, 개발자라면 ES 5, 6, 7 정도는 숙지할 필요가 있다.
💡falsy한 값
0, "", false, null, undefined, NaN
실무용 폴더구조 (container, presenter)
폴더 구조는 여러 종류, 이러한 종류를 패턴이라 한다.
리액트에서 사용하는 유명한 패턴으로는 container, presentational, hooks, atomic 패턴 등이 있다.
container/presentational 패턴
소스코드를 JS(기능)과 JSX(UI)로 나누는 방법,
container - 자바스크립트(기능) 부분, presentational - JSX(UI) 부분
위 파일을 2개의 파일로 나누는 방법은?
BoardWritePresenter.js
BoardWrite-Presenter.js
boardWrite.presenter.js -> 이름은 다 상관없다(회사별 차이)
파일을 나눴어도 실행될 때는 하나로 합쳐져 실행되어야 하는데 이 방법은 부모 컴포넌트(Container;불러오기 때문에)에 자식 컴포넌트(Presenter)를 불러오는 것/(App.js)에서 합쳐진다.
위와 같이 자식컴포넌트인 presenter를 부모컴포넌트인 container에 불러와 하나로 합쳐 실행.
파일은 두개로 나뉘어 있지만 실행시엔 pages에서 하나로 합쳐져 실행된다.
브라우저로 볼 수 있는 컴포넌트는 pages에 있는 index.js 뿐이기 때문에 하나로 합쳐둔 container를 pages에 가져와 import 해주어야 함
그런데, 변수와 함수는? 자식한테 물려줘야 onChangeWriter사용 가능하다. => props
💡부모 컴포넌트 & 자식 컴포넌트
-> import 되어 불려가는 컴포넌트 : 자식, 불러오면 : 부모
자식컴포넌트는 부모 컴포넌트 안에 포함
💡JSX?
JavaScript Xml(자바스크립트 확장 문법)
리액트에서는 virtual DOM을 다루고 있으므로 html을 가장한 JSX를 사용해야 함
JSX는 브라우저에서 실행되는 과정에서 자바스크립트 언어로 바뀜.
리액트의 html
props
컴포넌트를 2개로 나누면서 데이터와 기능의 연결고리가 끊어진다.
이를 연결하는것이 바로 props(부모 컴포넌트가 자식 컴포넌트에 물려주는 변수/함수) 함수를 공유하는 방법!!!// 자식이 부모에게 넘길 수는 없다.(단방향 관계)
부모 컴포넌트가 props 물려줄 때는 객체로 묶어 넘기게 된다.
const props = { aaa : handelChangeWriter } => onChange{props.aaa} -> handlechangeWriter 실행
props를 내려주기_ 부모 컴포넌트
자식 컴포넌트의 propsName부분을 유심히 볼 것!
props를 넘기게 되면 props={propsName:handlechangeWriter}형태의 객체로 넘어가게 되며 props는 여러 개를 내려줄 수 있다.
props 받아오기
Writer태그의 이벤트 함수부분(onChange)부분을 잘 볼 것
파라미터 부분에 props를 적지 않으면 받아올 수 없다.
또한 객체로 넘어오기 때문에 받아온 props를 사용하려면 객체의 속성을 꺼내오는 것처럼 사용해주어야 한다. 따라서 props.propsName 형태로 사용
리액트의 단방향 데이터 흐름
리액트는 데이터 흐름이 단방향 : props는 부모가 자식에게만 줄 수있으며, 자식이 부모에게 줄 수 없다는 의미이며 단방향 구조이기 때문에 에러를 캐치하기 더 쉽고 깔끔하다.
💡props 구조 분해 할당으로 받아오기
-> 구조분해 할당으로 props 를 받아오게 되면, props.propsName이 아닌 propsName만 적으면 된다.
-> 구조분해 할당으로 props를 받아오면 필요한 것만 받아올 수 있다. 부모컴포넌트는 하나지만 자식이 여러개인 경우 구조분해할당이 props를 내려주고 받는데 좀더 편리
(예시)
export vs export default
import 해올 때 중괄호를 사용해서 데리고 오는 것이 있는 반면 중괄호 없이 데리고 오는 것이 있다.
중괄호의 사용여부는 export 하냐 export default 하냐에 달려있다.
export 사용시엔 한 컴포넌트 내에서 여러개를 내보내기 때문에 중괄호를 사용해 필요한 것들만 import,
하지만 export default 를 사용하면 한 컴포넌트에서 한개만 내보내기 때문에 중괄호를 사용하지 않고 import.
export default 는 default로 export하는거라 이름 상관 없는 것임
atomic 패턴
atomic 패턴이란 소스코드를 아주 작은 컴포넌트 단위로 먼저 쪼개는 방법 -> 컴포넌트 중복 최소화
atoms, molecules, organisms, templates, pages 5개의 폴더로 나누어 컴포넌트 관리,
💡 Atomic 패턴의 장단점에 대해 알아보자.
