조금조금 REACT, Function 모듈화

Edwin·2023년 3월 1일

조금조금 REACT

목록 보기

11/31

이번 포스트의 주제는 Function 모듈화에 대해서 다뤄보겠다.

이상적인 리액트의 코드작성법이란

const App = () => {

return (<div></div>)
}

HTML 구문과 같이 작성된 JSX만 있어 가독성이 높여진 코드라고 한다. 즉 로직에 해당되는 아이들에 대해서 분리하여 별도의 모듈화하는 것이 필요하다는 말이다. 이렇게 모듈화 한다면, 실수로 코드를 수정하여 문제가 발생되는 것도 사전에 방지할 수 있다.

방법은 1) 별도의 Modules 파일을 만들어 함수와 같은 것을 묶어두는 방법이 있을 것이고, 2) 또 하나의 방법으로는 커스텀 훅으로 관리하는 방법이 있을 것이다. 커스텀훅에 대해서는 내일 살펴보도록 하고, 오늘은 함수 모듈화의 방법에 대해서 다뤄보고자 한다.

예제코드는 투두리스트 만들기이다.

사전에 만들어 놓은 CSS가 되어 있지 않은 코드를 분리화 하는 연습을 하고자 한다. 물론 컴포넌트를 분리시켜서, App 컴포넌트를 가볍게 만들 수 있고, 이때 주어지는 값을 props를 통해서 전달하지 않고 useContext를 통해서 전역변수를 선언하여 state를 관리할 수 있지만 이해의 측면을 위해서 하나의 컴포넌트에서 함수를 분리하는 방법에 대해서 다뤄보고자 한다.

콜백함수와 JS 파일 연결하기

먼저, Form 태그를 통해서 작성했던 코드를 콜백함수로 변경하자.

App컴포넌트

<form onSubmit={(e)=> write(e,todo,setTodo,setTitle,setTxt,title,txt)}>
      title <input required type="text" value={title} onChange={(e)=> setTitle(e.target.value)}/> <br/>
      txt <input required type="text" value={txt} onChange={(e)=> setTxt(e.target.value)}/><br/>
      <input type="submit"/>
</form>

기존의 하나의 컴포넌트에서 작업했을 때, 이벤트는 onSubmit={write} 였던 것에 반해서 별도의 파일로 분리하기 위해서 클로저(중첩함수)를 만들어주었다. 그리고 반환값에 전달할 정보를 담아야 한다. 이는 state가 전역에서 다뤄지고 있지 않은(!useContext) 상태이기 때문이다. 그리하여 사용할 인자들을 담아서 전달해주어야 한다.

func.js

export const write = (e,todo,setTodo,setTitle,setTxt,title,txt) => {
    e.preventDefault()
    const newTodo = {id:Date.now(), state:false, title, txt}
    setTodo([...todo, newTodo])
    setTitle('')
    setTxt('')
  }