hoazzinews 님의 블로그

지난 시간에 node.js을 설치하고 리액트 프로젝트를 생성했습니다.리액트 프로젝트 생성하기 리액트 프로젝트 생성하기이번 시간에는 리액트 프로젝트 생성 방법에 대해서 살펴보겠습니다. 1. node.js 설치 파일 다운로드리액트 프로젝트를 생성하기 위해서는 먼저 node.js를 설치해야 합니다.node 사이트(https://nodejs.orhoazzinews.tistory.com 이번에는 생성된 프로젝트의 기본 구조를 이해하는 시간을 갖도록 하겠습니다. 1. 프로젝트 실행하기우선 프로젝트 폴더로 이동합니다.  프로젝트를 실행합니다.> npm start   2. VSCode에서 프로젝트 open하기VSCode를 실행 합니다. ※참고. 만약 VSCode가 설치되어 있지 않다면 아래 글을 참고해서 설치합니다.V..

이번 시간에는 리액트 프로젝트 생성 방법에 대해서 살펴보겠습니다. 1. node.js 설치 파일 다운로드리액트 프로젝트를 생성하기 위해서는 먼저 node.js를 설치해야 합니다.node 사이트(https://nodejs.org/en)에 접속해서 'Download'를 클릭합니다. 2. node.js 설치설치파일을 이용해서 node.js를 설치합니다.    node.js 설치 과정에서 빌드 툴 자동 설치 여부를 물어봅니다.'Automatically install the necessary tools. Note that this will also install Chocalatey.'체크를 하면 node.js가 설치된 후 자동으로 빌드 툴이 자동으로 설치됩니다. 시간이 많이 소요됩니다. 일반적인 React 프로젝..

이번 시간에는 'state'에 대해서 살펴보겠습니다. 1. state가 뭔가요?state는 우리말로 '상태' 또는 '상태 값'이라고 합니다.state는 특정 데이터를 담을 수 있는 변수와 같은 개념이라고 생각하면 됩니다. 사람으로 치면 사람의 이름, 연락처, 메일 주소 등이 되겠네요.리액트에서도 프로그램에서 필요한 데이터를 state에 저장하고 사용합니다. 그리고 이렇게 저장한 데이터는 언제든지 변경 가능합니다.  2. state를 어디에 사용하나요?리액트에서는 state를 컴포넌트에서 사용합니다. 사람으로 치면 컴포넌트를 사람이라고 할 수 있고, 사람의 이름, 연락처, 메일을 컴포넌트의 state라고 할 수 있습니다. 그래서 일반적으로 state를 다른 말로 '컴포넌트 state' 또는 '컴포넌트 상태..

함수형 컴포넌트를 코딩할 때 JSX로 만듭니다. 이렇게 만들어진 컴포넌트는 프로그램이 실행되면 가상 돔(Virtual Dom)에 탑재되는데요. 이것을 렌더링(Rendering)이라고 합니다.가상 돔에 탑재된 컴포넌트는 실제 돔(Real Dom, HTML DOM)에 커밋(Commit)되어 사용자가 볼 수 있게 됩니다.※ React에서는 가상 돔의 컴포넌트가 실제 돔에 출력되는 것을 커밋(Commit)이라고 합니다.※ Bable: JSX를 JS(Javascript) 파일로 변환하는 JSX 컴파일러입니다.[용어 정리] 가상 돔에 컴포넌트가 생성되는 것을 '렌더링'이라고 했습니다.  그리고, 가상 돔의 컴포넌트가 실제 돔에 적용하는 것을 '커밋' 외에 '업데이트' 또는 '렌더링'이라고도 합니다. 이렇게 되면 '..