오늘은 폴더 구조에 대해 배웠다.
그동안 작업해왔던 코드는 나혼자 작성한 코드인데 실무에서 사용할때는 여러사람이 함께 사용하기에 폴더구조도 체계화 해서 관리한다고 한다.
오늘은 그중 가장 많이사용하는 방식인 container/presenter에 대해서 배웠다.
먼저 기존폴더는 다음과 같다.
pages란 폴더안에 실습한 내용들을 이름따서 폴더를 여러개 만들었고 그안에 js 파일을 만들었다.
만약 css 작업이 필요하면 styles 라는 폴더에 js 파일을 만든후 import 했다.
이렇게 되면 파일은 무한정 늘어나게 되고, 관리가 쉽지 않다.
container/presenter 폴더구조
container/prsenter 폴더구조는 잘게 쪼개는 것이다.
기존파일의 구성을 보면 다음과 같다.
크게 나누면 3가지이고, css파일까지 나누면 4가지 이다.
하얀색 부분은 이페이지에서 사용할 내용들을 import 하는 부분
노란색 부분은 변수를 정의하고 함수를 만드는 부분
하늘색 부분은 html을 만들고 함수를 바인딩하는 부분
CSS는 파일을 import
container/presenter 방식은 위에 4가지방식으로 파일을 쪼개 하나의 파일에 import 하는 것이다.
파일은 크게 5가지가 생성된다.
- index.js (모든 파일을 불러오고, 실행하는 파일)
- container (하위 파일들을 모두 담는 파일)
- present (html을 담당하는 파일)
- queries (gql 설정파일)
- styles(css 파일)
저렇게 5가지의 파일에 쪼개서 관리한다.
폴더를 쪼개면 다음처럼 설정된다.
index.js 파일을 제외한 폴더의 구조이다.
src라는 최상단 폴더에 다음과같이 작게 폴더를 구분한다.
Write라는 폴더에 있는 파일들은 모두 container 파일에 import 되어있다. 이 파일을 구현하고자 하는 index.js 파일로 export 하면 된다.
조금더 세부적으로 보면 다음과 같다.
Container 작성 방법
먼저 위쪽부분은 크게 달라진것이 없다.
import 할부분 import 하고 선언할 변수명들, 함수들 원래 작성하던 자리에 작성하면 된다.
return() 사이부분이 많이 변경되었다.
원래는 해당부분에 html 코드를 작성하고, 위치에 맞게 바인딩해주는 영역이었는데 이 방법에선 변수명을 다시한번 선언해준다.
이부분은 present 파일에서 사용하기 위함이다.
present 작성 방법
이부분은 html 작성 부분이다.
html 작성하는것처럼 위쪽부분에 Emotion들 import 해온다.
달라진점은 props 이다.
props는 데이터를 넘겨주는 함수이다.
기존에는 위에서 선언한 변수 또는 함수들을 그냥 바인딩했었는데 파일이 나뉘어 지면서 props를 사용하는것 같다.
사용법은 간단하다.
export default BoardWriteUI (props)
위쪽에 이런식으로 작성후 모든 함수에 props. 을 추가하면 된다.
만약 추가하지 않으면 함수가 동작하지 않는다.
queries 부분
queries 부분도 간단하다.
기존과 동일하게 작성하면 된다.
다만 기존에는 query 혹은 mutation과 같이 작성해서 import {gql, useMutation} 이렇게 작성하였는데 useMutation부분은 container 파일에 작성되면서 gql 단독으로 작성한다.
이렇게 모두 작성해 container 에서 취합한 후 index.js로 넘겨주면 된다.
index.js 에서 이렇게 정상적으로 import 되면 아무것도 없어보이지만 이파일에 모든것이 연결되어 있다.
주의점!
파일을 여러개 나누는 만큼 간결하지만 주의점이 있다.
파일 연결시 폴더경로, export import 이다.
파일연결을 크게보면
- container 파일에 present 파일 연결
- container 파일에 queries 파일 연결
- present 파일에 styles 파일 연결
- index.js 파일에 container 파일 연결
present 파일
container 파일
index.js 파일
이런식으로 export, import와 짝이 맞아야 하며 안맞으면 에러가 난다.
from'파일경로' 작성하는 부분도 정확히 작성해야한다.
또한 위에서 선언한 함수 또는 import 한 내용들은 꼭 아래부분에서 사용을해줘야 한다.
index.js 파일에서 볼수 있듯이 import BoardWrite를 작성했기에 return 부분에 BoardWrite를 작성해줘야 한다.
오늘 배웠던 내용은 아주 간단한 내용이라고 생각했지만 중간에 파일이 꼬이고, export와 import를 정확히 맞추지 않아서 시간을 아주많이 날렸다.
그냥 생각없이 작성하던 export, import 부분, 파일경로 설정 부분에 대해서 조금더 꼼꼼히 해야겠다고 느꼈다.
