이껏 만든 컴포넌트(페이지 컴포넌트) 들은 너무 길었다. 솔직히 보기도 조금 힘들었고.. 다만 지금껏 사용해서 약간 익숙해 졌다 뿐이지 실무에서는 이렇게 길게 작성한다면 남들이 보기에도, 수정하기에도 너무나 불편한 코드가 된다.
따라서 각 코드들을 70줄~100줄 정도로 줄여야 한다.
그러기 위해서는 폴더를 나눠야한다.
실무적인 폴더구조로 쪼개기.
파일을 나눈다
자바스크립트파일과, html파일은 쉽게 나눌 수 있다. 기존 return문 위쪽이 자바스크립트, 아래쪽 return안쪽이 html 이기 때문이다.
그다음은 styles폴더에 넣은 스타일 폴더인데 일단 위에서 먼저 나눈것을 가지고 시작한다.
state를 다른 파일로 넘겨줄 수 있다.
props를 사용한다.
일단 폴더구조를 나누다보면 부모파일, 자식파일 이렇게 생기게 되는데, 부모파일에 있는 데이터를 자식으로 넘겨줄 수 있다. 리엑트에선 부모에서 자식으로만 넘겨줄 수 있어 단방향 데이터 전달 방식을 가지고 있어 양방향보다 덜 복잡하게 코드를 작성할 수 있다.
그러면 props로는 어떻게 데이터를 전달하나.
일단 자바스크립트와 html을 나누어 각각 다른 함수를 만들어 사용한다.
모든 페이지들은 app.js의 컴포넌트 부분에 가서 실행되게되어 결과적으로 우리가 볼 수 있는 부분은 app.js인데, 여기에 들어가는 것이 index.js, 거기에서 js와 html을 뺐으니 연결시켜줘야한다.
자식을 부모에게 연결시켜주면 자식이 부모에게 들어가 실행되고, 데이터는 반대로 부모가 자식에게 전달한다.
container에는 자바스크립트 코드가 함수로 들어가고 return부분에는 presenter에 들어가는 html코드의 를 함수로 넣어주고 그 함수명을 태그로해서 넣어 이어준다.
index.js의 자식은 container, 그의 자식은 presenter,또 presenter의 자식은 style이 들어있는 파일이된다.
여기서 쿼리문도 따로 빼놓는다. 얘는 변수로 작용하니 props를 해주지 않아도 되고 단지 export 를해서 import 로 받아온다.
props는 자식태그를 만들어놓은 부모파일에 자식태그 안쪽에 보낼것들을 적는데 각각 키와 값의형태로 보내진다.
만약 const {data}= ...
를 자식으로 보내려고한다면
<자식함수명 data={data}/>로하여 자식의 함수명 옆 소괄호에 props를 적어주고, data가 들어간곳들에 앞에 props를 적어 받아온다.부모데이터를 자식으로 넘겨준다는 의미이다.
원래 props.뒤에는 키명이 쓰여진다. 그러나 일반적으로 실무에서는 통일 시킨다!
styles또한 import로 연결시키는데 이때는 주소만 주의하면 될것같다. 그리고 스타일중 일부가 아니라 모두를 받아오려면 일일이 쓰는것 보다 전체선택자 *를 사용하면 된다.
근데 여기서 주의할 것. *이라는건 이름이 아니라 그대로 사용을 하지 못하기에 이름을 만들어 주어야한다.
import * as 바꿀이름 from '스타일있는 주소'
만약 이름이 스타일의 s라면
각각 스타일을 지정해준 태그 앞에 s.이렇게 작성해준다.
<s.InPut/>
이런식으로 작성된다.
물론 이렇게 나눠서 모든것을 작성하더라도 각각의 해당하는 index.js에 연결되어 (물론 import가 제대로 되어있어야한다. 이경우에는 해당 index.js의 자식인 container 즉js의 주소와 연결되어야한다.)
실행은 같게된다. 이것을 리펙토링 이라고 한다.
리펙토링?: 결과는 같지만 안의 과정이 더 쉽고 간결하게 만드는것. 즉 하나의 파일의 코드를 줄이는 것을 말한다.
export default==> 기본으로 내보내라. 얘가 앞에 써있는경우 import 뒤에 어떤것이 (이름이)적혀있어도 저것이 기본이기에 export defualt 한것을 가져온다.
다만 이름은 헷갈리지않게 되도록 같은 이름으로 작성한다.
export==> 얘는 여러개 가능하다.
따라서 import {여기안에 가져올것 적기} 이렇게 중괄호를 사용해 가져온다.골라서 받아와야하기때문.
중괄호 안에 들어있는 이름은 그 이름에 있는것을 가져오는 것이기에 마음대로 절대 바꿔선 안된다.
export default 와 export 같이쓰는 법.
const aaa = "철수";
export default aaa;
export const InPut = styled.inputbackground:red;
===>> import aaa {InPut} from '위치(주소)'
이렇게 export전에 default로 받은것이름을 먼저 적어준다.
