폴더 구조 체계화

개발자에게 유지보수에 용이한 코드를 작성하는 것은 매우 중요하다. 한 페이지에 기능을 담당하는 자바스크립트 코드와 UI를 그리는 html코드를 모두 작성하면 코드가 길어지기 때문에 유지보수 측면에서 어려움이 있다. 따라서 작성 시 한 페이지에 70~100 줄 정도의 코드가 작성될 수 있도록 컴포넌트 단위로 폴더를 구조화해서 코드가 재사용될 수 있도록 작은 컴포넌트 단위로 관리하는 것이 좋다.
(필수적인 것은 아니다.)

Container-Persentation

Container-Persentation 패턴을 적용하여 기능을 담당하는 Container 컴포넌트와 UI를 그리는 Persentation 컴포넌트로 분리할 수 있다. 실행은 하나로 합쳐져 실행므로 분리하기 전 파일과 동작은 똑같지만 유지보수를 위해 코드를 짧게 작성하기 위한 목적으로 파일을 분리한다.
분리된 파일은 부모-자식 관계를 갖게 된다. 부모는 자식 컴포넌트를 import 해서 사용하고, 자식은 부모 컴포넌트의 변수와 함수를 props를 이용해 가져온다. 이때 중요한 것은 자식 컴포넌트가 가진 변수나 함수를 부모 컴포넌트가 사용할 수 없다. React에서는 상위 컴포넌트에서 하위 컴포넌트로 단방향으로만 props를 전달하기 때문이다. 따라서 컴포넌트의 부모와 자식 관계를 확인하는 것이 중요하다. 또한 A컴포넌트를 B컴포넌트에 넣고 그걸 다시 C 컴포넌트로 합치는 것이 가능하다. 이런 경우에는 (A(자식)B(부모))(자식)C(부모)의 형태가 된다.

//임의로 작성한 코드로 오류가 있을 수 있음.

import {useState} from 'react'

export default function ExamplePage(){

	//container가 되는 부분
	const [count, setCount] = useState(0)
    
    const onClickListener = () => {
    	setCount = count + 1
    }

}

  return(
  	//persentation이 되는 부분
      <div>
      	<div>{count}</div>
    	<button onClick={onClickListener}>버튼</div>
      </div>
  )
 }

Container

//임의로 작성한 코드로 오류가 있을 수 있음.

import {useState} from 'react'
//하위 컴포넌트인 presentation을 import 해서 가져옴.
import Presentation from 'address'

export default function Container(){

	//container가 되는 부분
	const [count, setCount] = useState(0)
    
    const onClickListener = () => {
    	setCount = count + 1
    }

}

  return(
	<Presentation 
      //함수와 변수를 상속
      onClickListener={onClickListener}
      count = {count}
    >
  )
 }

Presentation

자식 컴포넌트에서 부모 컴포넌트가 가진 변수, 함수 데이터 등을 넘겨받는 방법에는 props가 있다. 함수 피라미터 값으로 props를 넣어주고 넘겨 받은 함수, 변수 앞에 props.을 추가해 준다.

//임의로 작성한 코드로 오류가 있을 수 있음.

//상속된 변수를 사용하기 위해 props로 받아옴

export default function Presentation(props){


}

  return(
  	//persentation이 되는 부분
      <div>
      	<div>{props.count}</div>
    	<button onClick={props.onClickListener}>버튼</button>
      </div>
  )
 }
 
 

image from. https://isamatov.com/react-patterns-container/