- 리액트 설치 및 실행 방법 - 제목처럼 window 환경에서 리액트 개발환경을 세팅했지만 MAC도 상관없이 해당 내용으로 문제 없이 설치 및 실행이 가능하다. 그리고 나는 phpStorm을 사용했지만 이에 상관없이 VSCode나 기존에 사용하는 에디터로 세팅하면 된다. 1. node.js 설치 https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 링크로 들어가서 node.js를 다운로드한다. 버전은 LTS와 현재 버전 중 원하는 버전으로 다운로드하면 되는데 어느 버전을 다운 받든 딱히 상관은 없다. 나는 안정적인 LTS버전으로 다운을 받았다. 다운로드받..

Props란? props란 properties의 줄임말로, 상위(부모) 컴포넌트에서 하위(자식) 컴포넌트로 데이터 값을 전달할 때 사용하는 속성이며 이 데이터의 흐름을 "단방향 데이터 흐름" 이라고 표현합니다. Props 사용방법 먼저, 간단히 설명을 하자면 상위 컴포넌트에서는 하위 컴포넌트로 전달할 props 값을 지정하고, 하위 컴포넌트에서는 그 props 값을 받아서 rendering을 합니다. 또한 데이터 수정은 값을 전달하는 상위 컴포넌트만 가능하고, 값을 받는 하위 컴포넌트는 오직 읽기만 가능합니다. App.js (상위 컴포넌트) import React from "react"; import Member from "./Member.js"; function App() { return( Hello!..

State(상태) 란? State(상태)란 React에서 동적인 데이터의 값을 다루기 위해 사용하는 Object입니다. 리액트는 함수를 사용해서 변수 대신에 State(상태)에 저장하여 사용하는데 그 때 사용하는 리액트 함수가 바로 useState()입니다. State는 변수와 달리 상태가 변경되면 자동으로 재렌더링이 되는 장점이 있습니다. useState() 사용방법 이해하기 쉽게 아래 영상에 해당하는 간단한 예제 코드와 함께 설명을 해보겠습니다. counter.js import React, { useState } from 'react'; const Counter = () => { const [count, setCount] = useState(0); const onIncrease = () => { se..