리액트를 기반으로 개발된 프로젝트들을 보면 가끔 의미 없이 루트 요소를 를 정의한 코드들을 확인할 수 있습니다. 사용되지 않는 를 쓰는 이유는 리액트에서 정의한 render() 함수는 반환 값의 루트 요소는 하나만 정의되어야 하기 때문입니다. const Example = () => { return ( Hello World ); }; 예제 코드를 사용한 결과물은 아래와 같습니다. 실제로 사용하지는 않지만 JSX 규칙에 의해 와 같이 감싸는 요소를 정의하면 HTML의 DOM 구조에도 는 적용됩니다. Fragment를 사용하자 import React, { Fragment } from 'react'; const Example = () => { return ( Hello World ); }; 앞서 작성한 예제 코..
시작에 앞서 React는 Facebook에서 만든 자바스크립트 라이브러리로 Single Page Application를 만들기에 적합한 기술입니다. React는 CDN 방식으로도 사용이 가능하지만 권장되는 방식은 Webpack과 같은 번들러를 통해서 프로젝트를 구성해서 이용하는 방법입니다. Facebook에서는 쉽고 빠르게 React 프로젝트를 구성할 수 있도록 boilerplate를 만들어 사용자에게 배포하고 있는데 이와 같이 React 프로젝트를 정의하고 배포할 수 있는 환경을 만들어주는 기술을 CRA(create-react-app)라고 합니다. 시작하기 npx create-react-app todo-list cd todo-list npm start 위의 명령문을 실행하면 React 프로젝트를 만들고..
Photo by Alex Duffy on Unsplash 시작하기 create-react-app을 통해 만든 React App의 경우 3000번 포트를 사용해서 구동될 수 있도록 설정되어 있습니다. 일반적인 상황에서는 3000번 포트를 이용해 개발하는 것이 문제 되지 않으나 프로젝트 상황이나 개발 환경에 따라서 포트를 변경해서 사용해야 하는 상황이 발생합니다. 예를 들면 이미 3000번 포트를 다른 프로그램이 사용하고 있거나 다중으로 프로젝트를 실행해야 하는 상황인 경우 기본으로 사용하는 포트를 변경해서 사용해야 합니다. 이와 같은 경우 포트를 변경해서 사용하는 대표적인 방법으로는 아래와 같이 3가지 정도로 이야기해 볼 수 있습니다. 1. 명령어로 포트 설정하기 1. React 프로젝트 폴더에서 아래와 ..