같은 프론트엔드를 맡은 팀원분과 실력 차이가 아주 많이 난다. 물론 현직 개발자분이 이제 리액트를 시작한지 3개월 밖에 안 된 뽀시래기(?) 프론트엔드 개발자인 나보다 부족하긴 쉽지 않을 테지만... 아무튼 그래서 좀 더 빠르게 성장하고자 이미 작성된 파트의 코드를 분석하고 그걸 기반으로 프로젝트 페이지를 만들기로 했다.
App.jxs 파일
window.location.href
window.location프로퍼티로 접근하면 읽기 전용인 Location 객체를 담을 수 있다. 만일 특정 페이지에 콘솔창을 열어alert(location);을 입력한다면, 해당 페이지의 url 주소가 알림창으로 뜬다.
window.location.href = 'url 주소';를 입력할 경우 해당 주소로 페이지를 이동시킬 수 있다. 위의 코드에서는 함수가 작동하면 페이지가 이동하도록 코드가 짜여 있다. ( 'JavaScript/다른 페이지로 리다이렉트하기' )
StudyCreate.jxs 파일
데이터의 이동, 상태(state) 관리가 핵심이라고 생각된다. 이번 기회에 switch/case문도 알아두자.
일단 구조 자체는 복잡하지 않다. 상태가 필요한 만큼 변수로 지정하고 useState를 사용하여 각각을 컨트롤할 상태 관리 함수를 지정했다. switch - case문은 단지 if문을 보기 편하게 가독성 있게 표현하는 방식이다. (참고자료) swich (타겟 변수), case 조건:을 if문으로 변형시키면 if (타겟변수 == 조건):일 때와 같다. 조건이 맞을 경우 아래에 적힌 실행문이 실행된다. 다만 case문에 break를 적지 않는다면 만날 때까지 모든 실행문이 실행된다.
onChange 함수는 evt(event)를 인자로 받는다. 이벤트의 타겟 id가 case문 조건에 맞을 경우, state 변경 함수를 통해 해당 타겟의 value 값으로 state를 업데이트한다.
이렇게 만들어진 onChange 함수는 컴포넌트 내부의 onChange 이벤트와 연결된다. 따라서 컴포넌트의 입력값(evt.target.value)이 바뀔 경우 state 값이 수정된다. {regions.map((region, idx) => <option key={idx}>{region}</option>} 코드는 select 컴포넌트에 포함되어야 하는 option 컴포넌트를 map 함수를 통해 동적으로 만들어준다. (regions는 list 형태의 데이터이다.)
