Front-end/React6 [React] - 컴포넌트(Component란?) 리액트는 컴포넌트(Component) 라고 하는 단위를 기반으로 구성되어 있다. 컴포넌트의 특징1. 재사용성컴포넌트는 여러 곳에서 재사용할 수 있어 개발 속도와 생산성을 높여준다. 2. 컴포넌트 내부에서 state를 관리할 수 있도록 해준다useState 메서드를 사용하여 쉽게 관리 가능하다. 컴포넌트는 크게 함수형 컴포넌트, 클래스형 컴포넌트로 나눌 수 있다. 함수형 컴포넌트말 그대로 함수 기반 컴포넌트로, 자바스크립트 함수를 작성함으로써 가장 간단하게 컴포넌트를 정의하는 방법이다.(상단에 import React from "react"; 는 필수적으로 작성해줘야 한다.) Home.js에서 함수형 컴포넌트를 만드는 예시import React from "react";function Home() { .. 2025. 2. 26. [React] - package.json과 package-lock.json의 차이 리액트 프로젝트를 세팅하고 나면, 프로젝트 폴더 안에 package.json과 package-lock.json 두 가지 파일을 발견할 수 있을 것이다. 두 파일은 중요한 역할을 담당하지만, 각각의 목적과 기능은 조금씩 다르다. 이번 포스팅에서는 두 파일의 차이점에 대해서 설명해 보려고 한다.package.json프로젝트의 전반적인 정보를 담고 있는 핵심 파일이다. => 프로젝트의 설계도 역할을 한다고 이해하면 된다.{ "name": "study", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.6.3", "@t.. 2025. 2. 24. [React] - JSX란? (개념, 변환 과정, 주요 문법) JSX (Syntax Extenstion to JavaScript)란? 리액트를 처음 접할 때 헷갈렸던 부분이 JSX이다. js는 JavaScript의 확장자이기 때문에 익숙하지만, JSX는 생소했다.JSX는, JavaScript XML의 약자로, 자바스크립트 코드 안에서 HTML과 유사한 문법을 사용할 수 있도록 지원해주는 문법 확장 도구이다. (JSX = JavaScript + HTML, XML)=> 자바스크립트 내에서 HTML을 사용하기 위해서 JSX가 권장된다!JSX 변환 과정브라우저는 JSX 문법을 이해하지 못하기 때문에, JSX 코드를 JavaScript 코드로 변환해주는 과정을 내부적으로 거치게 된다. (Babel과 같은 컴파일러가 사용된다고 한다)//JSX 코드const element = .. 2025. 2. 23. [React] - 리액트 동작 흐름 살펴보기 (App.js, index.js, index.html) React 프로젝트의 중요한 파일 3가지create-react-app 명령어를 통해 리액트 프로젝트를 생성했다면, 위와 같은 index.js 파일이 만들어졌을 것이다. 이 중에서 중요한 3가지 파일에 대하여 간단히 설명해보고자 한다.index.htmlpublic 폴더에 있다. index.js에 대응되는 기본 HTML문서로, 웹페이지의 뼈대를 제공한다. 이 파일이 직접 표시되는 것은 아니고, index.js에 의해 렌더링된 결과가 표시된다. (이름 변경 시 에러가 나므로 주의하자)App.jssrc 폴더에 있으며, 실제로 화면에 표시되는 내용들이 여기에서 정의된다.index.jssrc 폴더에 포함되어 있는 메인 프로그램이다. 여기에서 HTML 템플릿 및 컴포넌트를 조합하여 렌더링하고 실제로 화면에 표시한다... 2025. 2. 22. [React] - npm과 yarn의 차이 npm, yarn이란?npm과 yarn은 모두 JavaScript의 런타임 환경인 Node.js의 패키지 관리자이다. 개발자들이 js로 만든 여러 패키지들이 온라인 npm DB에 업로드되어 있는데, 이러한 패키지들을 npm, yarn과 같은 패키지 관리자를 통하여 설치 및 삭제, 관리할 수 있다. npm (Node Package Manager)Node.js를 설치하면 npm도 기본적으로 같이 설치된다.=> 별도로 설치하지 않아도 바로 사용 가능하여 리액트 입문자들이 많이 사용한다고 한다. 주요 npm 명령어들npm init # package.json 생성npm install # package.json의 모든 패키지 설치npm install # 특정 패키지 설치npm install package_na.. 2025. 2. 20. [React] - npx create-react-app 설치 오류 해결방법 npx create-react app 명령어 오류React 개발환경을 세팅하다가 다음과 같은 오류를 마주쳤다.Visual Studio Code와 node.js를 설치한 후, vscode 터미널(powershell)에서 폴더를 연 후 터미널에서npx create-react-app [프로젝트명]위 명령어를 입력하자 생긴 오류이다. 구글링 결과 npm create-react-app을 입력하면 해결된다는 말도 있었지만, 내 컴퓨터에서는 여전히 똑같은 오류가 떴다.(node.js와 npm 설치가 잘 되어있는지 터미널로 확인해도 문제없이 잘 나왔다.) 오류 문구npx : 'npx' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 .. 2025. 2. 19. 이전 1 다음
