지금까지 사용해온 HTML CSS javaScript 는 이 세가지만으로 페이지를 구성해왔었다. ex) index.html style.css count.js 등등
하지만 React 를 사용하기 시작한 후로 그 구조가 조금 달라졌다.
❗️ 지금부터 예시로써 사용하는 폴더구조, 명칭(container presenter)은 사용자 마다 다르다.
📌 폴더구성
React 설치 후 기본적 폴더 구조는 위와 같고,
pages는 쉽게 생각해서components들을 불러와 화면에 보여주며,
~.container.tsx는 기능적 요소들이,
~.presenter.tsx는index.html과 같이 화면에 보여질 구조,
~.styles.ts는 이름대로css처럼 꾸며주는 요소들이 들어간다.❗️(확장자는
typescript를 사용하고 있어 .js가 아니다.)
요약하면 pages 내부의 파일이 src 안 components 속 board폴더의 파일들을 불러와 내보내준다.
📌 index.js
boards 폴더 안의 new 폴더 내부의 index.tsx 는 아래와 같이 구성 되어있다.
형태만 본다면 javaScript 에서의 function(){} 이 생각난다.
export 를 통해 외부로 내보내지고 default 가 붙어 BoardWritePage 만을 내보내는것으로 취급된다.
return 값으로 BoardWrite 을 내보내는데 BoardWrite 컴포넌트의 내용을 화면으로 내보내준다.
📌 ~.presenter.js 와 ~.stlyes.js
~.presenter.js 와 ~.stlyes.js 는 HTML 과 CSS 로 생각하면 편하다.
import 를 통해 ~.stlyes.js 와 연결시켜주어 사용한다
📌 ~.container.js
~.container.js 는 기능적 요소들을 담아 ~.presenter.js 에게 전달한다.
여기서 주목해야 할 점은
~.container.js파일에서~.presenter.js파일을return한다는 것이다.❗️ 최종적으로 화면에 보여지는
index.js는~.presenter.js를return하는~.container.js를return한다.즉,
index.js의return값은~.container.js다
