React 시작하기

4주차까지는 HTML/CSS로 화면을 만들고, JavaScript로 DOM을 조작하면서 ‘데이터가 바뀌면 화면도 바뀐다’는 것을 경험했습니다. 다만 이 방법은 화면 규모가 커질수록 코드가 길어지고, 어디를 고치면 어떤 화면이 바뀌는지를 추적하기가 점점 어려워집니다.

5주차에서는 그 문제를 React라는 라이브러리를 통해 풀어볼 것입니다. React의 컴포넌트(Component) 개념을 접하고 활용하면서, 화면을 작은 부품으로 나누어 조립하는 방식에 익숙해지는 것이 이번 미션의 목표입니다.

이를 위해 기존 대시보드 UI를 그대로 가져오되, 카드 한 장, 카드 목록처럼 역할이 다른 부분을 각각 컴포넌트로 분리해 구성하는 연습을 하게 됩니다. 또한 컴포넌트가 화면을 그리기 위해 필요한 값들은 위에서 정리해 내려 보내고, 아래 컴포넌트는 받은 값으로 화면을 렌더링하는 흐름을 경험합니다.

이 과정을 통해 하나의 긴 HTML 파일을 쌓아 올리던 방식에서 벗어나, '부품을 나눠 만들고 조립해서 화면을 완성하는 방식'으로 사고하는 법을 배우게 됩니다.