- 실무적인 폴더구조 -> Container / Presenter
- 컴포넌트 분리 및 데이터 전달 -> Props
- 목록 형태의 데이터를 보여주자 -> Map / Filter
- 안전한 코드를 작성하자 -> Typescript
- 규칙을 정해서 협업하자 -> Eslint / Prettier / Husky
주소 설계 방식에 대한 이해
위의 POST,GET REST 방식보다 RESTful 메서드/boards로 통일하여 일관성 있게 작성할 수 있게 되었다.
폴더 구조 체계화
components라는 파일을 만들어 놓고 여러 가지 컴포넌트들을 넣어놓고 조립하여 만드는 패턴으로 한다.
소스코드의 약자인 src안에 components 폴더를 만들고 그 안에는
units: 1번만 쓰이는 컴포넌트, units 컴포넌트commons: 2번 이상 공통적으로 쓰이는 컴포넌트
units 안에 게시판 상세보기/ 리스트 보기/ 등록하기 등의 부품들을 만들어 놓고 페이지에서 불러서 조립하여 보여준다.
Container / Presenter 패턴
Container : 자바스크립트 로직 있는 부분
Presenter : Html 코드 있는 부분 또는 Presentational Component
BoardWrite.container.js -> 뒤에 있는 .은 확장자를 나타내 중요하지만 .은 보기 편하게 나눠주는 역할로 . 이외에 - , _로 작성해도 무방하다.
파일을 세부적으로 잘게 쪼개지만(보통 70~100줄 사이) 실제 실행할 때에는 Presenter가 Container로 합쳐지고 Container는 app으로 합쳐져서 보여지게 된다.
쪼개지다보니 Container에 있는 함수, 변수, 데이터들이 Presenter에 할당되는 것들이 끊어지는데 이것을 props로 넘겨주어야 한다.
내용을 아래와 같이 적게되면 객체로 변하여 props로 넘어가게 된다.
여기에 하나의 규칙이 있다.
부모에 있는 함수를, 부모에 있는 state를 자식 컴포넌트에 내려보내는데 반대로 자식이 부모에게는 못 보낸다.
props는 부모컴포넌트가 자식컴포넌트한테 전달해주는 변수 또는 함수
부모랑 자식이 하나로 합쳐져서 결국은 부모가 보여지는 것이다.
한 번 쓰이는 컴포넌트는 단위 컴포넌트라, units이라 한다.
두 번 이상 쓰이는 컴포넌트는 공통적으로 쓰인다고 해서 공통 컴포넌트, commons라고 한다.
units/board 안에 write-등록하기 list-목록보기 detail-상세보기 즉 앞에 이렇게 만들어놓고 pages에서 불러 조립해서 보여준다.
app.js 와 pages의 index.js가 부모 자식 관계 pages의 index.js와 units의BoardWrite.container.js가 부모 자식 관계 마지막으로 BoardWrite.container와 BoardWrite.presenter.js가 부모 자식 관계이다.
이렇게 자바스크립트 + HTML이 있는 4개의 컴포넌트를 파일을 나눠 하나는 자바스크립트만 하나는 HTML만 기능하고 보여지는 부분을 나눈다.
따라서 BoardWriteUI가 BorderWrite에 합쳐지고 BoarderWrite가 pages의 index.js에 합쳐지고 pages가 app.js에 합쳐져 우리 눈에 보이게 되는 것이다.
props
이렇게 쪼개진 파일들을 연결을 위해 export와 import를 사용했다.
그러나 import를 한다고 내부에 있는 데이터들까지 연결되지 않는다. 이 때 두 컴포넌트간 데이터를 연결하기 위해 props를 사용했다.
부모가 가진 데이터를 자식한테 넘겨줄 수 있는 것이 props이고 합쳐지는 것은 자식이 부모에게 와서 합쳐진다.
props를 보내줄 때 문자열의 경우 일반적으로 넘겨주면 되나 자바스크립트, 숫자, 변수, 함수등을 넘겨줄 때에는 중괄호를 써서 넘겨주어야 한다. 그러면 자동으로 객체로 넘어간다.
효과
하나의 파일에서 다 할 수 있지만 수정하기 어렵기 때문에 가급적이면 잘게 쪼개서 유지 보수성을 높일 수 있다.
쪼갤 때 기준을 정해서 나누는데 로직은 container 화면은 presenter 두개를 조립해서 Page에서 만들고 나중에 로그인은 Page에 추가하고 설정은 app에 추가하여 각각의 역할이 있고 실행될 때에는 하나로 합쳐져서 실행되고 그때 데이터는 props로 주고 받는다.
쿼리문, emotion 부분도 나눠 쓸 수 있다.
부모에서만 자식으로 데이터를 proprs로 전달할 수 있다.
=> 리액트의 데이터 전달 방식(흐름) : 단방향 전달 방식
즉, 부모에서 자식으로는 데이터를 전달할 수 있지만, 자식에서 부모로는 데이터를 전달할 수 없다.
export vs export-default
컴포넌트, 변수를 export하여 사용한다. container가 길어지니 쿼리문을 따로 변수로 빼서 사용한다. 변수는 컴포넌트가 아니므로 변수 파일에 데이터로 props를 넘겨주지 못한다.
우리가 import 해올 때 중괄호 를 사용해서 데리고 오는 것이 있는가 하면, 중괄호 없이 데리고 오는 것 이 있다.
중괄호의 사용 여부는 export를 하냐 export default를 하느냐에 따라 결정된다.
export를 사용하게 되면 한 컴포넌트 내에서 여러개를 내보내기 때문에 중괄호를 사용해 필요한 것들만 import한다.
하지만 export default를 사용하게 되면 한 컴포넌트에서 한개만 내보내기 때문에 중괄호를 사용하지 않고 import 하게 된다.
정리
export vs export default
export
- 중괄호를 사용해서 import 해온다.
- 한 컴포넌트 내에서 여러개를 내보낼 때 사용한.
- import 해올 때는 export한 이름 그대로 불러와야 한다.
- 한번에 묶어서 import 할 시에는
import * as S from ‘경로’를 이용한다.export default
- 중괄호 없이 import 해온다.
- import 해올 때 export 한 이름이 아니어도 괜찮다.
- 한 컴포넌트에서 한개만 export했기 때문에 파일의 경로만 제대로 지정되면 이름이 어떤것이든 상관없이 잘 불러온다.
