[동아리 소개 페이지 만들기] 3. 페이지들 만들고 동적 기능 추가하기4 - Recruit, Apply

1. 페이지 구현

1) 초안

Recruit 페이지는 지원을 위한 페이지이다. 사실 여기에서 의견이 조금 엇갈렸었다.

시간이 촉박하니 여기까지만 하고 지원하기 버튼은 구글 폼 링크를 연결해서 끝내자는 의견과

그래도 소개 페이지까지 만들었는데 조금만 더 노력해서 지원서 양식까지 만들어보자는 의견이었다.

회의 결과 결국 지원서 양식까지 만들기로 했고 지원서 양식은 내가 구현하기로 했다.

 

2) content

Recruit 페이지

Recruit 페이지는 모집을 위한 페이지이다. 간단하게 지원하러 가기 버튼과 FAQ로 구성했다.

버튼을 누르면 지원서 양식 페이지로 이동하도록 구성했다. 이 과정에서 결국 나중에 하려고 미루었던 React의 Router을 접하게 되었다. 

Apply 페이지

Apply page는 지원서 양식이다. 간단한 개인 정보와 몇 가지 질문을 입력받는다.

React 폼의 제어 컴포넌트를 이용하여 질문과 입력 칸을 구현했다.

CSS를 적용한 지원서이다.

 

3) 동적 기능 추가

formData 가져오기

useState로 name, phonenumber 등의 변수를 만들고 onChange이벤트 핸들러를 이용하여 값이 바뀔 때마다 콜백함수로 값을 업데이트 했다. 그 다음 formData 객체에 값들을 추가해주어 formData를 갱신해주었다.

formData를 가져오기 위해 

 

 

 

2. 문제를 해결하며 배운 것들

• React Router
• 이벤트 핸들러
• React Form 다루기

https://wondrous-developer.tistory.com/197

[React] 리액트 라우터(React Router) 사용하기

https://ko.legacy.reactjs.org/docs/forms.html

폼 – React

3. 느낀 점

React에서 폼에 다양한 기능이 많은 것 같다. React 폼의 제어 컴포넌트를 이용하면 HTML의 form 태그보다 훨신 더 수월하게 지원서 양식을 구현할 수 있다. React는 처음 배우기 어렵지만 한 번 궤도에 오르면 너무 편한 것 같다.