본문 바로가기

분류 전체보기31

[React] 동적 컴포넌트를 위한 필수요소 Props와 State에 관하여 개요 이번 포스트에서는 React의 동적 컴포넌트를 위한 필수요소인 Props와 State에 대해 알아보겠습니다. Props 리액트에서 다루는 데이터는 크게 Props와 State 두개로 나뉩니다. 여기서 props에 대해서 상세하게 알아보도록 하겠습니다. props는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 값 입니다. 자식 컴포토넌트에서는 props값을 받아와, 이를 처리 하도록 합니다. 또한, 부모 컴포넌트에서 전달하는 props 값이 바뀐다면 자동으로 업데이트 됩니다. 예제를 통해 props에 대해 자세히 알아보겠습니다. 이전포스트에서 설치한 React 폴더 보면 src 디렉터리가 있습니다. 이 src 디렉터리에 components 폴더를 추가한 뒤, Count.js 파일을 만든 후, Count.. 2022. 1. 5.
[React] creact-react-app 으로 리액트 앱 생성 및 실행 개요 이전 포스트에서는 React의 개념 및 주요 특징에 대해서 설명하였습니다. 이번 포스트에서는 React project를 생성하고 실행하는 법에 대해서 알아보겠습니다. create-react-app 이란? React 프로젝트 개발환경 구축을 처음부터 설정하는 것은 굉장히 복잡합니다. 직접 개발 환경을 구축하기 위해서는 웹팩(webpack)에 대한 공부를 해야합니다. 하지만 웹팩으로 구성이 아닌 create-react-app 으로 설치를 한다면 아주 간단히 세팅을 할수 있습니다. create-react-app은 페이스북 에서 만든 공식적인 React 웹 개발용 보일러플레이트(Boilerplate) 입니다. 직접 모든 개발환경을 설정하지 않아도 되며, 페이스북에서 지속적으로 업데이트를 해주기 때문에, 많.. 2022. 1. 4.
[React] React의 개념 및 특징에 대하여 개요 이번 블로그에서는 리액트가 무엇인지 간단하게 살펴보며, 리액트의 특징에 대해 살펴보고, 간단하게 설치하는 법을 알아 볼려고 합니다. React란? React는 UI를 만드는 Javascript의 라이브러리의 하나로써, 사용자 인터페이스를 만들기 위해 사용됩니다. 리액트는 Javascript의 프레임워크라고 생각을 하시는 분들이 있을 수도 있지만, 리액트는 엄연히 라이브러리로 정의 되고 있습니다. 주로 프론트앤드로 개발되는 기술은 React, Angular, Vue 가 대표적입니다. React와 Vue는 UI를 만들기 위해 모든 기능을 포함하지 않은 라이브러리 이고, Angluar는 모든 기능을 포함하고 있는 프레임 워크 라고 생각 하시면 됩니다. 다만 React가 라이브러리 라고 불리우고 있지만, .. 2022. 1. 3.