앞선 포스트에서 컴포넌트(component)는 리액트 프로젝트에서 특정 부분이 어떻게 생길지를 결정하는 선언체라고 배웠습니다. 리액트의 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 두 가지로 선언될 수 있습니다. 클래스형 컴포넌트와 함수형 컴포넌트를 비교하며 컴포넌트를 생성해보겠습니다. 또한 컴포넌트에서 사용하거나 렌더링 하는 데이터를 담는 props와 state의 차이점과 선언 방식을 배우겠습니다. 📌 클래스형 컴포넌트 📚 클래스형 컴포넌트 컴포넌트를 선언하는 방식은 클래스 컴포넌트와 함수 컴포넌트로 나뉩니다. 클래스형 컴포넌트와 함수 컴포넌트는 state 기능 및 라이프 사이클 기능, 임의 메서드 정의 등에서 차이가 납니다. 각 방법으로 작성된 코드를 보면서 차이점을 비교해보자. 📃 클래스 컴포넌..

리액트는 HTML과 비슷한 형식의 코드 작성 방식인 JSX를 통해 코드를 작성합니다. 오늘은 JSX의 기능과 규칙들을 배워보도록 하겠습니다. 또한 코드의 가독성과 작성을 돕는 ESLint와 Prettier도 다뤄보도록 하겠습니다. 코드 이해하기 src/App.js 파일을 열어보면 다음과 같은 코드가 있을 것입니다. import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; 위의 코드를 하나씩 이해해봅시다. 📚 import 구문 import logo from './logo.svg'; import '...

본격적으로 React에 대해서 배우기 전에 Visual Studio Code를 통해 프로젝트를 생성하는 방법에 대해 알아보겠습니다. 프로젝트 생성 시 만들어진 프로젝트의 폴더와 파일들이 의미하는 바도 함께 배워보겠습니다. 프로젝트 생성 🛠 프로젝트 작업에 사용할 폴더를 만듭니다. 폴더를 Shift + 우클릭 후 PowerShell 터미널 열기를 클릭합니다. 🛠 yarn create react-app 을 입력합니다 🧨 Warning 1) 윈도우의 경우, 허가되지 않은 스크립트라는 말이 나오는 경우 윈도우 검색창에 PowerShell을 검색 후, PowerShell 아이콘을 우클릭 하여 관리자 권한으로 실행 Set-ExecutionPolicy Unrestricted 입력 후 엔터 y를 눌러서 허가 2) 맥북..

📌 왜 리액트(React)인가? 최근 몇 년간 자바스크립트(JS, JavaScript)는 개발자들의 뜨거운 관심을 받고 있습니다. JS는 단순한 스크립트 언어를 넘어 웹 애플리케이션에서 가장 핵심적인 역할로 발돋움했습니다. 그러나 JS만으로는 프런트 엔드 사이드쪽의 애플리케이션 구조를 관리하기에는 무리가 있습니다. 이를 해결하기 위해 React, Angular, Ember.js 등 수많은 프레임워크들이 개발되었습니다. 이번 포스트에서는 여러 프레임워크 중 React가 중심이 된 이유와 개발 환경 설정을 해보겠습니다. 또한 리액트의 주요특징인 Virtual DOM에 대해서 알아보겠습니다. 📚 왜 리액트인가? 프론트 엔드 개발을 하다보면 MVC, MVVM, MVW 등과 같이 MV~로 시작되는 아키텍처들을 들..