폴더 구조화
서비스의 규모가 커질수록 기능이 많아지기 때문에 폴더가 굉장히 많아지게 된다.
파일을 큰 그룹으로 묶어주면, 관련 기능이 모두 해당 폴더 안에 들어있기 때문에
유지보수에 유리하고 주소는 가독성이 좋아진다.
예시로 boards (게시판 기능)을 살펴보자.
이처럼 큰 그룹으로 묶어주었기 때문에 해당 주소의 내용은 모두 큰 그룹에 관련된 페이지임을 바로 알아차릴 수 있다.
📌 게시글 수정시 주소는 왜 boards/edit이 아닐까?
게시글을 수정할때는 특정 게시글을 수정하게 되므로
특정 게시물 정보를 포함하는boards/[boardId]/edit으로 적어야 한다.
Container / Presenter
실무에서 사용하는 폴더 구조는 여러가지 방법이 존재하는데, 이러한 방법들을 패턴이라고 부른다.
React에서 사용하는 유명한 패턴으로는 container / presentational 패턴과 atomic 패턴이 있다.
그 중 container / presentational 패턴에 대해 먼저 알아보자.
container / presentational 패턴은 소스코드를 javascript(기능)와 JSX (UI) 로 나누는 방법이다.
Container
javascript(기능) 부분
Presenter
JSX(UI) 부분
위의 사진과 같은 파일을
이렇게 분리해준다.
위와 같이 자식컴포넌트인 presenter를 부모 컴포넌트인 container에 불러와 하나로 합쳐 실행 한다.
이때, 파일은 두개로 나뉘어져 있지만 실행시에는 pages에서 하나로 합쳐져서 실행된다는 점을 기억하자.
우리가 브라우저로 볼 수 있는 컴포넌트는 pages에 있는 index.js 뿐이기 때문에 하나로 합쳐둔 container를 pages에 가지고 와서 import 해주어야 한다.
📌 부모 컴포넌트와 자식 컴포넌트
- 부모 컴포넌트 : import하여 불러오는 컴포넌트
- 자식 컴포넌트 : import되어 불려가는 컴포넌트
-> 부모 컴포넌트 안에 자식컴포넌트가 포함되는 구조
📌 폴더 구조에 따른 각 파일들의 역할
- _app.js : 설정
- index.js : 로그인체크
- container.js : 기능구현
- presenter.js : html작성
- queries.js : gql (query, mutation)
- styles.js : emotion
Props
컴포넌트를 2개로 분리하면서 데이터와 기능의 연결고리가 끊어지게 되는데, 이를 props가 연결해준다.
props 는 부모 컴포넌트가 자식 컴포넌트에게 물려주는 변수/함수이다.
리액트의 단방향 데이터 흐름
리액트는 데이터 흐름이 단방향 구조이다.
props는 부모가 자식에게만 줄 수 있으며, 자식이 부모에게 줄 수 없다.
부모 컴포넌트가 props를 물려줄때, 객체로 묶어서 넘기게 된다.
//부모 컴포넌트 _ container 부분
const BoardWrite = ()=>{
const [writer, setWriter ] = useState()
const handlechangeWriter = (e)=>{
writer = e.target.value
setWriter(writer)
}
return(
// 자식 컴포넌트 - presenter 컴포넌트
// props를 내려주는 부분
<BoardWriteUI propsName={handlechangeWriter}/>
)
}//자식컴포넌트 - presenter 부분
//파라미터 부분에 props를 적어야 받아 올 수 있다.
const BoardWriteUI = (props)=>{
return(
<Wrapper>
<Writer
type = "text"
placeholder = "작성자를 적어주세요"
// props.key를 하면 value값을 받아온다.
onChange = {props.propsName}
/>
</Wrapper>
)
}export default / export
export default와 export의 차이점은 import시 중괄호 사용 여부이다.
export
- 중괄호를 사용해서 import
- 한 컴포넌트 내에서 여러개를 내보낼 때 사용한다.
- import 해올 때는 export한 이름 그대로 불러와야 한다.
- 한번에 묶어서 import 할 시에는
import * as S from ‘경로’를 이용한다.
export default
- 중괄호 없이 import
- 한 컴포넌트에서 한개만 export했기 때문에 파일의 경로만 제대로 지정되면 이름이 어떤것이든 상관없다.
- import시 export 한 이름이 아니어도 된다.
예시
import BoardWriteUI, {createBoard} from "./BoardWrite.presenter";
// export default, export 함께 가져오기
import BoardWriteUI from "./BoardWrite.presenter";
// export default 가져오기
import Asdfwrerw from "./BoardWrite.presenter";
// export default 이름 바꿔서 가져오기
import Asdfwrerw, { createBoard } from "./BoardWrite.presenter";
// export default 이름바꾸고 export랑 함께 가져오기
import * as S from "./BoardWrite.styles";
// export 모두 가져오기
// <S.BlueButton></S.BlueButton>로 사용할 수있다.
new Date ()
const newDate = new Date()
newDate.getFullYewr()
newDate.getMonth() + 1 // month는 0부터 시작해서 +1을 해준다
newDate.getDate()
