사부작사부작해요

리액트의 컴포넌트는 템플릿 이상의 기능을 수행한다. 데이터에 맞춰 UI를 구성하는 것, 라이프사이클 API를 이용해 변화가 생길 때 작업을 처리하는 것, 임의의 메소드를 만드는 것 등이 있다. 프로젝트에서 컴포넌트를 렌더링하면 함수에서 반환하는 내용을 보여준다. 리액트에서 컴포넌트는 함수형 또는 클래스형 컴포넌트 선언으로 만들 수 있다. 함수형, 클래스형 컴포넌트에 대해 간단히 알아보자. 1. 함수형 컴포넌트 함수형 컴포넌트는 클래스형보다 선언하기 편하다. 메모리 자원도 덜 사용하고, 배포할 때 결과 파일이 더 작지만 큰 차이는 없다. 클래스형과 다르게 state와 라이프사이클 API를 사용할 수 없다는 것이 단점이지만 리액트 v16.8 업데이트 이후 Hooks 기능이 도입되면서 해결되었다. 리액트 공식..

리액트 컴포넌트에서는 함수에서 undefined를 반환하는 것은 불가하다. 하지만 JSX에서 undefined를 렌더링하는 것은 가능하다. 한번 해보자. undefined를 리턴 App.js를 다음과 같이 수정한다. import React from 'react'; import './App.css'; function App() { const name = undefined; return name; } export default App; 아무것도 리턴되지 않아 에러가 생긴다. undefined를 JSX 내부에서 렌더링 이번에는 App.js를 다음과 같이 수정한다. import React from 'react'; import './App.css'; function App() { const name = undef..

1. 리액트 프로젝트 생성 create-react-app을 사용해 리액트 프로젝트 작업 환경을 간편하게 구축한다. 쉘에서, yarn create react-app 으로 리액트 프로젝트를 생성한다. 프로젝트는 현재 디렉토리에 생성된다. yarn create react-app hello-world 2. 개발 서버 구동 쉘에서, 생성된 프로젝트 디렉토리로 이동 후 리액트 개발 전용 서버를 구동한다. cd hello-world yarn start 나는 3000번 port를 사용중이어서, 3001번에서 열었다. REFERENCES 김민준(2019). 리액트를 다루는 기술, 개정판

리액트 프로젝트를 만들기 위해 Windows10에서 Node.js, yarn을 설치한다. 추가적으로, VS Code의 확장 프로그램을 설치한다. 1. Node.js 설치 Node.js는 웹 브라우저 환경이 아닌 곳에서도 자바스크립트로 연산할 수 있도록 한다. 리액트 프로젝트 개발과 연관된 도구들이 Node.js를 사용하기 때문에 설치한다. Installer 다운로드 및 Node.js 설치 Node.js Windows installer를 다운로드받아 설치한다. 나는 최신 LTS 버전인 14.17.3을 다운로드 받았다. https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaS..