패턴

✍️ 정의

• 실무에서 사용하는 폴더 구조는 여러가지 방법이 존재하고, 이 방법들을 패턴이라고 부른다.
• React에서 사용하는 유명한 패턴으로 container/presentational 패턴과 atomic 패턴이 있다.

container/presentational 패턴

• 소스코드를 Javascript(기능)부분과 JSX(UI) 부분으로 나누는 방법을 의미한다.
  • container: Javascript(기능)
  • presentational: JSX(UI)
• 자식 컴포넌트인 presenter를 부모 컴포넌트인 container에 불러와 하나로 합쳐서 실행한다.
  • 두 파일은 나뉘어져 있지만, 실행시에는 pages에서 하나로 합쳐져서 실행된다.
  • 왜냐하면, 우리가 브라우저에서 볼 수 있는 컴포넌트는 pages에 있는 index.js 뿐이기 때문이다.

JSX

• Javasciprt Xml의 약자로 자바스크립트의 확장 문법이다.
• 리엑트에서는 virtual DOM을 다루기 때문에 html을 가장한 JSX를 사용해야 하며, 이는 브라우저에서 실행되는 과정에서 자바스크립트 언어로 바뀌게 된다.

props

• 부모 컴포넌트가 자식 컴포넌트에게 물려주는 변수 또는 함수를 의미한다.
• 부모 컴포넌트가 props를 물려줄때는 객체로 묶어서 넘기게 된다.
  • props = { name: value }

props 구조 분해 할당으로 받아오기

• 구조 분해 할당으로 props를 받아오게 되면, propsName만 적으면 된다.
• 또한 필요한 것만 받아올 수 있다.

//구조분해 할당으로 props 받아오기 

//기존 파라미터 부분에는 props라고 적어 props의 모든것을 받았습니다.
export const function BoardWrite({handleInput, handleChange}){

    //기존 방법은 props.handleInput , props.handleChange 입니다. 
    <input onChange={handleInput}
    <button onClick={handleChange}
}

리액트의 단방향 데이터 흐름

• 리액트는 데이터 흐름이 단방향 구조이다.

atomic 패턴

• 소스코드를 아주 작은 컴포넌트 단위로 먼저 쪼개는 방법을 의미한다.
• 이렇게 하는 이유는 컴포넌트의 중복을 최소화하기 위함이다.
• 총 5개의 폴더 구조로 이루어지며, 각각의 의미는 화학의 원리를 이용하여 만든다.
  • atoms
  • molecules
  • organisms
  • templates
  • pages