-----6일차

벌써 6일차가 되었습니다!

오늘은

실무적인 폴더구조

에 대해서 볼수있도록 하겠습니다 !

1.실무적인 폴더구조

폴더구조를 어떻게 만들면 좋을까요??
물론 미니프로젝트를 하거나 서비스를 하게 되면 궂이 할필요는 없다고 생각합니다
하지만!
실무에서는 적어도 수십개에서 수백개까지 갈 수도 있기 때문에
효율적인 폴더구조로 작성을 하는게 저도 보기편하고 협업시 다른분들도 보기 편하겠죠??
그러면 어떻게 해야할까요??
짧게짧게 코드를 작성해야겠죠??
코드의 길이가 길어도 100줄이 안넘어가게 만드는게 좋을거라고 생각합니다.

폴더구조의 패턴들이 있는데 오늘은 그중 몇가지를 볼 수있도록 하겠습니다
대표적으로
Container/Presenter패턴이 있습니다

구조적으로 파일을 잘라서 분리를 시키는것을 기본으로 두고 출발할수 있겠습니다
예를 들어
게시판이 있다고 한다면
게시판에 입력을 하는 input창이 있다고 하면
그 input을 처리하는 function과 Presenter와 Container로 나누어줍니다
html의 input 창을 Presenter로
기능부분을 Container로 나누어 주는것입니다
그럼 Export한 파일이 Import가 가능하겠죠??
이렇게 하면 파일은 잘게잘게 쪼개지게 되지면
결국에는 한개의 파일로 합쳐져서 실행이 될 수 있는거죠!
그렇다면은 유지보수와 리펙토링도 훨씬 간편하게 할수있고 에러 처리도 쉽게 가능 할 것입니다!

그런데 내부 변수와 함수는 어떻게 전달할지 고민이 될 것 입니다.
어떻게 할까요??
이것을 위해서 props라는 것이 있습니다

props란

부모컴포넌트가 자식컴포넌트에게 전달해주는 변수 또는 함수라고 할수 있습니다

사용은 어떻게 할까요??

Props사용법

const props={ 변수명,함수명}

부모요소에
변수명 ={함수}
자식요소에
props.변수명
방식으로
Presenter에 전달이 됩니다
즉 부모의 요소에 있던 것들이 자식요소에 전달이 될수 있다는 이야기 인데요
전달될때 자동으로 위의 내용처럼 props객체가 생성이 되게 되고
이 props가 자식요소로 내려가게 됩니다!

(*주의: 부모에서만 자식으로 props를 전달할수 있어요! -리액트의 전달방식(단방향전달))

그러면 Container에 있던 함수가 Prensenter에도 적용이 되어 최종적으로
부모컴포넌트에 모든 UI와 함수가 작동될수 있는 것입니다!