리액트 3

[React] 컴포넌트

Component 컴포넌트는 react에서 화면을 구성하는 하나의 요소입니다. 헤더, 메인, 메뉴바, 기사목록 등 화면을 하나의 컴포넌트로 구성할 수 있습니다. 무자비하게 마구 분리한다면, 너무나 많은 파일이 만들어지므로 적당하게 크기를 잡고 컴포넌트를 지정하는 게 필요합니다. 컴포넌트에는 클래스형 컴포넌트와 함수형 컴포넌트 두 종류가 있습니다. 현재는 함수형 컴포넌트를 사용하도록 권장하고 있습니다. https://react.dev/reference/react/PureComponent#migrating-from-a-purecomponent-class-component-to-a-function PureComponent – React The library for web and native user inter..

[React] 리액트와 JSX 소개

리액트(React) 기존 HTML로 구성된 화면은 페이지를 이동하거나, 데이터가 변경되면 새로운 HTML 파일을 불러와서 화면에 표출하는 방식으로 MPA 기반입니다. MPA(Multi Page Application) 이에 반해 react는 SPA(Single Page Application) 방식입니다. HTML 파일은 하나만 사용하고 페이지를 이동하거나 데이터가 변경되면 HTML 파일에 있는 태그를 삭제하고 새로운 태그를 렌더링하는 방식을 사용합니다. react는 앞서 사용한 HTML, CSS, JS의 사용은 편하게 하고 오직 화면단만 신경쓸 수 있도록 돕는 프론트엔드 라이브러리 입니다. 또한, 사용하기에 앞서 Html, Css, Javascript는 기본적으로 숙지가 되어있어야 합니다. 왜 그런지는 아..

[React] 리액트 설치

리액트라는 프로그램에 대해 강의를 듣고 간단히 복습했습니다. 실행하는 방법에 대해 설명해보겠습니다. 먼저, node js를 설치합니다. https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 가능하다면 LTS(Long Term Support) 버전으로 설치하는 것이 좋습니다. 가장 안정적으로 오랫동안 지원되는 버전이기 때문입니다. 설치를 하고 나면, 윈도우의 경우 명령 프롬프트 창, Mac은 터미널을 실행합니다. 그리고 명령어를 통해 node와 npm 버전을 확인합니다. C:\Users>node -v v18.16.1 C:\Users>npm -v 9.5.1 이..