[ReactJS] CRA to Our Boilerplate(해당 프로젝트에서 디렉터리 구조)

 

리액트 개발환경을 설정하게 되면 기본틀을 제공해주는데 해당 강의에서는 기본틀에서 원하는 구조로 변경을 하게 됩니다.

 

원래의 구조는 이런 형태입니다.

 

위의 형태를 이런식으로 바꿧는데요.

 

_actions와 _reducer는 Reduc를 위한 폴더들입니다.

components/views 안에는 Page들을 넣게됩니다.

components/views/Sections 안에는 해당 페이지에 관련된 css파일이나 component들을 넣어줍니다.

App.js는 Routing관련 일을 처리합니다.

라우팅 관련된 일이라고 하면 원하는 페이지로 가고싶다면 갈수있도록 해주는 것을 의미하는 것입니다.

Config.js는 환경 변수 같은 것들을 정하는 곳입니다.

hoc은 Higher Order Component의 약자로 컴포넌트 안에 function으로 다른 컴포넌트를 갖는 function입니다.

만약 Auth라는 HOC가 있다면 해당 유저가 해당 페이지에 들어갈 권한이 있는지를 판단한후에 권한이 있다면 Admin component로 가게하고 아닐경우 User component로 가게됩니다.

utils는 여러군데서 쓰일수 있는 것들을 넣어주어서 어디서든 쓸수 있게 해주는 디렉터리입니다.

 

각 페이지의 구조는 이런 형태인데 이런 기본 컴포넌트 펑셔널 형태를 쉽게 만드는 방법이 있습니다.

 

해당 Extension을 다운받으면 됩니다!

 

다운 받으면 rfce를 입력하고 자동완성시키면 해당 구조로 바뀌게 됩니다!