react5 [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] - 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 다음
