목표
-실무적인 폴더구조 Container / presenter 1일차
-컴포넌트 분리 및 데이터 전달 props 실무적인 폴더구조 Container / presenter
- 페이지 컴포넌트: 페이지를 컴포넌트로 취급할때 페이지 컴포넌트라고 부른다. - 컴포넌트 : 버튼이나 기능을 작게 나눠서 하나의 부품으로 취급하는것.
실무적인 폴더구조방식으론 여러가지가 있지만 나는 Container/Presenter방식으로 배웠다.
이 방식은 위 사진처럼 boards 라는 폴더 내에 하위폴더를 이름으로 나누어 저장하는 방식이다.
사진은 1단계로 나누었지만 컴포넌트롤 활용하기 시작하면 조금 달라진다.
위 사진 처럼 기능은 기능파일에 html은 html파일에 저장한다.
이 때 각 파일은 pages가 아닌 pages와 같은 경로에 src라는 폴더를 만들어 component로 관리하게 된다.
예를 들면 pages 안에 01-board라는 파일이 있다면
src 디렉토리 안에 컴퍼넌트와 커먼 디렉토리를 만든다
여기서 컴퍼넌트와 커먼 디렉토리의 목적은 아래와 같다.
컴퍼넌트 - 각각 다른곳에 쓰여야 하는 파일을 모아놓는 디렉터리. 커먼 - 대부분의 파일에 들어가는 컴퍼넌트를 모아놓는 디렉터리.
이번 수업에서는 컴퍼넌트 부분의 폴더를 구조화 했다.
기능과 html부분을 src/component/units/board 경로에 각 다른 파일에 저장한다.
여기서 board이 부분은 안에 있는 파일이 board와 관련된 파일들 이란걸 뜻한다.
board 안에는 또 write, list , detail 로 나뉘는 데 안에 들어간 파일들의 목차라고 보면 된다.
폴더구조는 여기까지 하고 이제 연결방법과 props에 대해서 알아보자
컴포넌트들의 연결(데이터 전달)과 props
-컴포넌트간의 부모 자식관계
-파일간 데이터 전달과 props컴포넌트에는 부모자식 관계가 성립되는데 이는 리액트에서의 데이터 전달이 단방향구조이기 때문이다.
간단하게 말하면 import가 입력되어 있는파일이 export하는 파일의 부모인 것 같다.
우선 사용방법을 알아보자
- 데이터를 주고받는 방법
간단하다. import와 export를 하면 된다.
예를들어 메인, js, html 파일이 있고 각 폴더의 페이지함수는 파일명과 같다고 했을때.
js폴더에서import **html(페이지함수 이름이다.)** from "html파일의 경로"
위 코드를 js파일 상단에 입력하면 html파일은 js파일과 연결된 것이다.
하지만 여기서 문제가 있다.
js파일과 html파일이 연결은 됬지만 이전에 한곳에서 만들었던 함수나 state들은 연결이 되지않는다.
이를 연결하기 위한 방법이 props 인데 아래에서 알아보자.
props는 container에서 presenter로 변수 함수 혹은 스테이츠 들을 넘겨주는 역할을 한다.
//부모 컴포넌트 container 부분
const BoardWrite = ()=>{
const [writer, setWriter ] = useState()
const handlechangeWriter = (e)=>{
writer = e.target.value
setWriter(writer)
}
return(
// 자식 컴포넌트 presenter 컴포넌트
// 본격적으로 props를 내려주는 부분입니다.
)
}
`
이 부모 컨테이너에서 사용한 변수들을
return (요 안에 입력해준다
writer ={writer}이런식으로(앞이랑 뒤를 맞춰주는게 이용이 더욱 편리하다.)
)
자식 프레센터파일에서는
변수,함수,스테이트 앞에 props.을 붙여주고 페이지함수의 매개변수로 props를 넣어주면 된다.
