React - TypeScript + Hook(2)

면접, 코딩과제로 인해서 2주간 신경을 못 써서...

이전 초기화 시킨 TypedScript + Hook에서 기존 기능들을 하나씩 추가할 예정이다.

 

전체적으로 파일 형태를 보면 컴포넌트는 이렇게 구성했다.

 

아직 서버를 구상하고 있지 않기 때문에, 가상 파일을 만들고 거기서 data를 불러 오려고 한다.

data.js

 

App.tsx에 자식 component를 불러왔다. Main과 Phonlist를 불러 왔고, 자식 component에 목업 데이터를 보내주는 방식을 취했다.

이부분을 이해하는데 오래 걸렸다.

   "부모 component에서 자식 component로 props를 내려줄 때,  자식 component에서 Type을 정해줘야 한다."

면접, 과제 할 때, 짬짬이 찾아 봤을 때, 이해하는데 오래 걸렸던 부분이었다.

App.tsx

그래서 PhoneList에 code를 보면

자식 component에서 type들을 지정해주었고, 부모 component에서 props를 받아 올 수 있었다.

type을 지정해 줄 때, type을 선언 해줄 수 있고, interface로 선언 해줄 수 있다. 어떤걸 사용해도 상관없지만, 통일성 있게 작성해주면 좋다.

  *UserInfo에서 객체 형태에 key값과 value의 type을 설정해주고, PropsData에서 course키에 빈배열에 객체형태로 들어오는 Type을 지정했다.

PhoneList.tsx

그리고 PhoneList의 자식 component로 PhoneForm을 지정해주었기에 여기에 데이터를 넘겨주었고, PhoneForm에서 데이터를 받기 위해서 PhoneForm에서 type들을 지정해주었다.

  *이전에 nickname과 phone을 문자열 형태로 받아 왔고, 문자열을 그대로 받아 오기 때문에 문자열로 type을 설정 해주었다.

  *구조할당을 이용해서 Props 값을 넣어주고 return값에 바로 넣어 주었다.

PhoneForm.tsx

그리고 Main.tsx는 간단하게 logo와 input형태값과 글쓰기 버튼을 넣어 주었다.(이미지는 unsplash에서 아무거나 가져왔다. 전화랑 책이 있는 사진. PhoneBook이니까)

Main.tsx

전부 적용해서 render를 시켜주면 아래 사진처럼 render가 잘 된다.

#Typescript#React#Hook#Phonebook