코딩자율학습 리액트 프런트엔드 개발 입문 1주차 학습 후기
이번 포스팅에는 학습을 시작한 React 학습의 첫 주차 후기를 공유하고자 합니다 .웹서비스의 사용자 인터페이스를 효과적으로 구착하고 동적인 프론트엔드를 구현하기 위해, 앞으로의 4주간의 React 학습을 꾸준히 이어 나가면서, 매주 학습 것들을 간략히 정리해서 공유해 보겠습니다.
1일차: 리액트 시작하기
첫날은 리액트가 도대체 무엇이며, 학습해야 하는 이유를 알아보았습니다. 리액트는 사용자 인터페이스(UI)를 구축하는 데 유용한 자바스크립트 라이브러리입니다. 학습의 필요성에 대해 충분히 이해할 수 있었습니다. 본격적인 학습 전에 개발 환경이 필수적이며, Node.js와 VSCode를 설치하고 Vite를 이용해서 리액트 프로젝트를 생성해 보았습니다.
불필요한 파일들을 정리한 후 npm run dev 명령어를 실행하여 “Hello, React!”가 화면에 정상적으로 출력해 보았습니다.
리액트 애플리케이션의 실행 순서는 npm run dev -> index.html -> main.tsx -> App.tsx 라는 것을 학습했습니다.
2일차: JSX개요 및 컴포넌트
2일차에는 리액트 개발의 핵심 요소인 JSX와 컴포넌트에 대해서 공부했습니다. JSX는 JavaScript XML의 줄임말로, 자바스크립트 코드 내에서 HTML과 유사한 문법을 사용할 수 있도록 하는 확장 문법입니다. 하나의 루트 요소로 반환, 모든 태그 닫기, 카멜 케이스 속성, 중괄호를 이용한 표현식 사용, 객체로 인라인 스타일 지정 등 문법적 특징들을 익혔습니다.
리액트의 주요 개념인 컴포넌트에 대해서도 학습했습니다. UI를 재사용 가능한 작은 단위로 나누는 개념으로, 클래스 컴포넌트와 함수형 컴포넌트의 차이점을 알아보았습니다. 현재는 함수형 컴포넌트가 표준처러 자리 잡아서 앞으로는 함수형 컴포넌트로 작성을 하면 될듯 합니다.
3일차: Props 객체와 이벤트
3일차에는 컴포넌트 간의 데이터 통신 방법인 props와 사용자 상호작용을 위한 이벤트 처리 방식을 배웠습니다. props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때 사용하는 속성입니다. 데이터를 개별적으로 전달하거나, 객체로 묶어서 전달하는 등 다양한 전달 방식을 실습하여 활용도를 높일 수 있음을 알았습니다.
사용자 상호작용에 필수적인 이벤트 처리도 배웠는데, onClick과 같은 이벤트를 사용하여 버튼 클릭시 alert 창을 표시하는 기능등을 직접 구현해 보았습니다. 이벤트 핸들러에 매개변수를 전달하거나 참조 형태로 전달 하는 방법, 이벤트 객체, 이벤트 전파와 같은 내용까지 어떤 것들이 있는지 공부했습니다.
4일차: 컴포넌트 상태
4일차에는 리액트 상태 관리의 핵심인 useState훅과 useReducer훅을 배웠습니다. 간단한 상태는 useState훅을 사용하여 손쉽게 처리할 수 있음을 알았습니다. name, age, gender와 같은 값을 변경하는 예제를 통해 동작 방식을 이해하는데 도움이 되었습니다.
상태 로직이 복잡해질 경우에는 useReducer 훅의 활용이 효과적이라는 것을 학습했습니다. count, user, cart와 같이 복잡한 상태들을 useReducer로 관리하는 예제를 실습하며, 관련 함수들을 별도의 reducer 디렉토리에 분리하여 작성함으로써 코드의 가독성과 유지보수성을 높일수 있음을 알게되었습니다. 이를 통해 “간단한 상태는 useState, 복잡한 상태는 useReducer”를 사용하면 효율적이라는 것을 이해하게 되었습니다.
5일차: 컴포넌트 스타일링
5일차에는 웹페이지를 시가적으로 꾸며줄 스타일링 비법들에 대해 배웠습니다. 전통적인 CSS 방식(인라인, 글로벌, CSS 모듈, classnames)부터 시작하여, CSS-in-JS 방식(styled-components, emotion, vanilla-extract)등등 다양한 방법들을 알게 되는 시간이였습니다. 개인적으로 Tailwind CSS가 숙달된다면 매우 효율적인 스타일링이 가능한 것이라는 인사응ㄹ 받았습니다. 기존에 익숙한 글로벌 CSS방식을 유지하는 것도 편리할수 있겠다는 생각도 들었으며, 이부분은 좀더 사용해 보면서 나에게 가장 적합한 방법으로 선택해서 사용하는게 좋을듯 합니다.
이미지 렌더링이나 폰트 적용과 같은 기본적인 웹 구성 요소에 대한 내용들도 학습을 통해 익혔습니다.
1주차 마무리
이번주에는 리액트 학습을 시작하면서 기본적인 개념과 실습을 통해서 어떻게 사용하는지를 알게되는 시간이였습니다. 개발 환경 설정부터 컴포넌트, 상태 관리, 스타일링까지 리액트의 주요 구성 요소들을 직접 다뤄보며 이해를 높일 수 있었습니다.
