React에서 제공하는 StrictMode는 애플리케이션에서 발생할 수 있는 문제를 자체적으로 검사하는 기능입니다. StrictMode를 활성화 하면, React는 의도적으로 컴포넌트를 두 번씩 렌더링하여 발생할 수 있는 side effect를 확인합니다.  React는 렌더링과 커밋 두 단계로 동작합니다. 렌더링 단계에서는 DOM과 같은 특정 환경에 어떤 변화가 일어나야 하는 지 결정합니다. 이 때 React는 이전 렌더와 현재 렌더의 결과값을 비교합니다.커밋 단계는 위의 변경 사항을 실제로 반영하는 단계입니다. 일반적으로 커밋단계는 렌더링 단계보다 훨씬 빠릅니다. 때문에 렌더링 단계가 병목이 되어 브라우저가 멈출 수 있는데, 이를 위해 렌더링 단계를 작은 단위로 나누어 각 단계를 중지했다가 재개하는 ..

작성한 React 코드를 배포하기 위해서는 웹 서버가 문제 없이 사용할 수 있도록 알맞은 형식으로 빌드해야 합니다.1. 프로젝트 빌드하기아래 명령어를 입력하면 빌드가 진행됩니다.npm run build빌드가 정상적으로 완료되면 아래와 같은 문구를 볼 수 있습니다.빌드가 완료되면 프로젝트 폴더 내에 build 폴더가 새로 생성됩니다.이 build 폴더는 프로젝트에서 작성한 코드(CSS, JS, HTML 등)들과 사용된 자원(이미지, 영상 등)들이 포함되어 있습니다.2. 로컬환경에서 실행하기빌드한 프로젝트를 배포하기 전에, 코드가 잘 동작하는지 로컬환경에서 웹서버를 실행해볼 수 있습니다.아래 명령어는 npm 저장소에서 serve라는 프로그램을 내려받고, build라는 폴더에서 serve를 실행합니다.npx ..

특정 매커니즘(FSM)에서 상태를 표시할 변수가 필요할 때 state를 사용할 수 있습니다.리액트에서 state는 useState( ) 함수를 통해 사용할 수 있습니다.// useState를 사용하기 위해 먼저 불러와야 합니다.import { useState } from 'react';// useState를 호출하면, num 변수와 setNum 함수를 반환합니다.const [num, setNum] = useState(1);useState( )는 초기 상태값을 매개변수로 받으며, 두 가지 요소를 반환합니다.num : 현재 상태 값setNum : num의 값을 변경하는 함수(물론, 이 두 반환값의 이름은 임의로 지을 수 있습니다) 아래 예시는 무작위 값을 num으로 하여 setNum()함수를 이용해 상태값을..

React에는 기본적으로 제공되는 prop이 있는데, 그것이 바로 children prop입니다.children은 컴포넌트의 여는 태그와 닫는 태그 사이에 입력된 값을 받는 prop입니다. 아래 코드는 'but A', 'but B'라는 이름의 버튼 두 개를 출력합니다.이런 경우처럼 단순히 보여지기만 하는 값을 다룰 때는 좀 더 직관적으로 코드를 작성할 수 있습니다.// *** Button.js *** //function Button({ text }) { return {text};}export default Button;// *** App.js *** //import Button from './Button';function App(){ return( );}expor..

React에서는 jsx를 통해 생성한 요소(element)를 함수를 이용해 새로운 태그로 정의할 수 있는 방법이 있는데,이를 컴포넌트(Component)라고 합니다.1. 컴포넌트 선언 및 호출컴포넌트를 활용하기 위해서는 다음 두 가지 조건이 필요합니다.     1. 함수 이름의 첫글자를 대문자로 해야 하고    2. 반환값은 jsx 문법으로 만든 요소이어야 한다 // *** App.js *** //// App 컴포넌트를 만들었습니다.function App(){ // return값은 jsx로 만든 html 코드입니다. return ( hello world );}export default App; // 외부 파일에서 App 컴포넌트를 사용할 수 있게 합니다.// ..

웹 브라우저에는 개발자 도구가 존재합니다.Chorme 브라우저의 경우 웹페이지에서 F12를 누르면 개발자 도구를 불러 올 수 있습니다.개발자 도구에서는 웹페이지를 이루고 있는 HTML/CSS 코드를 볼 수 있는데,만약 웹페이지가 React를 이용해 만들어졌다면 React 개발자 도구를 이용해 해당 요소들을 볼 수 있습니다.React 개발자 도구는 기본 도구와 달리 Chorme 브라우저에서 추가로 설치해야 하는 플러그인입니다.1. 설치구글에 리액트 개발자 도구 혹은 React Developer Tools 라고 검색하면 아래 Chrome 웹 스토어 페이지로 들어갈 수 있습니다.2. 설치 확인 설치가 완료되었다면, 브라우저 우측 상단에 퍼즐 모양 아이콘을 눌러 브라우저에 설치된 플러그인 목록들을 확인해주세요...

VScode 기준으로 설명하겠습니다.node.js가 필요합니다. 여기서는 Vite라는 프로그램의 템플릿을 이용해 React를 설치하는 법을 설명해줍니다.1. 패키지 초기화 & 생성프로젝트를 시작하고자하는 경로로 들어가 아래 명령어를 실행합니다. Typescript & Javascript에 따라 다르게 설정 할 수 있습니다. my-app에는 프로젝트 이름을 입력하면 되겠습니다.npm create vite@latest my-app -- --template react-jsnpm create vite@latest my-app -- --template react-ts 설치한 프로젝트 폴더에 들어가서 나머지 의존관계를 해결합니다.cd my-appnpm install2. 초기 구성설치가 완료되면, 다음과 같은 파일들..

React는 Meta에서 사용자 인터페이스를 손쉽게 만들기 위해 개발된 JavaScript 라이브러리입니다. 현재는 Google의 Angular와 함께 프론트엔드 분야에서 가장 많이 쓰이는 오픈소스 라이브러리가 되었습니다. 기본적인 React 구문은 다음과 같습니다.import ReactDOM from 'react-dom/client';const root = ReactDOM.createRoot(document.getElementById('root'));function App(){ return ( // JSX contents );}root.render();