[개발일기] 리액트로 전화번호부 만들기

(2023.05.27) 사실 예전에 어떤 회사 코딩테스트로 봤었다.

다시 해보면서 리액트로 만들때 컴포넌트 단위로 잘 쪼개야겠다는 생각이 들었다.

화면에 보이는 하나의 UI요소를 컴포넌트로 묶어서 따로 개발하면 코드 파악도 쉽고 유지보수도 용이하다.

물론 데이터 흐름을 파악하기 쉽게 짜야 한다. 그러나 그건 리액트를 하면서 매우 중요한거고 신경을 쓰면서 하니깐.

다음에 이런 비슷한 형태의 기능을 만들때 참고하면 좋을것 같고.

 

// 최상단 컴포넌트, PhoneBook.js
// 기억하기 위해 짧게 축약해서 정리했다.

export default function PhoneBook() {
  const [users, setUsers] = useState([]);
  const addUser = (user) => {
    // userState를 추가하는 함수
  }
  const removeUser = (user.id) => {
    // userState를 제거하는 함수  
  }
  
  return (
    <section>
      <PhoneBookForm addUser={addUser} />
      <InformationTable users={users} removeUser={removeUser} />
    </section>
  )
}

// PhoneBookForm.js
export default PhoneBookForm({ addUser }) {
  const [userState, setUserState] = useState();
  
  const handleSubmit = () => {
    addUser(userState); // <- 이게 핵심. 
    // 이 컴포넌트에서 다루는 state를 props로 받아온 함수에 인자로 넣어 실행. state 끌어올리기.
  }
  return (
    <form>
    ...생략
    </form>
  )
}

// InformationTable.js
export default InformationTable({ users, removeUser }) {
  // sort함수로 users데이터를 정렬

  const display = sortedData.length > 0 ? (
    {/** map을 돌려서 ui랜더링. 요소 onClick함수에 removeUser넣기 */}
  ) : (
    <div>&nbsp;</div>
  )

  return (
    <table>
    ...생략
      <tbody>{display}</tbody>
    </table>
  )
}

// 여기서 중요한 건 jsx. jsx는 const test = <div>test</div>; 이런 문법이다.
// 위에선 display가 jsx 문법으로 되어있다. 변수로 갖고 있다가 return문 안에서 {변수명} 이렇게 적용.
// 코드가 길어질 때 이렇게 나눠서 관리하는 것도 좋을 것 같다.
// 리액트에서는 코드가 브라우저에서 실행되기 전,
// 바벨이라는 트랜스파일러를 통해 일반 자바스크립트 형태의 코드로 바꿔준다.
// 이로써 오래된 브라우저에서도 작동할 수 있게 한다.