React Hooks란?클래스 컴포넌트의 기능을 함수 컴포넌트에서도 사용할 수 있게 도와주는 메서드를 말한다. 나는 이미 사용하고 있었다!!! useState와 useRef도 사실은 React Hooks였다.  React Hooks의 특징React Hooks에는 이름 앞에 접두사 use가 붙는다는 특징이 있다. 함수 컴포넌트 내부에서만 호출 가능하다.조건문, 반복문 내부에서는 호출 불가능하다. Custom Hooks 만들기함수를 만들고 함수의 이름 앞에 단지 use만 붙여주면 된다. 리액트는 내부적으로 use 접두사를 사용하는 함수를 커스텀 훅으로 인식하기 때문에 리액트 훅을 호출하여도 오류를 발생시키지 않는다. 커스텀 훅은 보통 src 폴더 밑에 hooks라는 폴더를 만들어서 보관한다.

JSX란?JSX란 JavasScript와 HTML의 장점을 결합하여 효율적으로 UI를 구성하는데 도움을 주는 확장된 자바스크립트 문법이다.JSX를 사용하면 JavaScript와 HTML을 혼용하여 사용할 수 있습니다. JSX 주의 사항1. 중괄호 내부에는 자바스크립트 표현식만!{} 내부에는 자바스크립트의 표현식만 넣을 수 있다. 즉, 한 줄의 코드가 특정한 값으로 표현되어야 하기 때문에, if문과 for문은 사용할 수 없다. 대신 삼항 연산자(조건 ? true값 : false값)를 사용해 조건에 따라 값을 표시하거나, map을 사용해 반복적인 렌더링을 할 수 있다. 2. 숫자, 문자열, 배열의 값만 렌더링된다.숫자, 문자열, 배열의 값은 잘 렌더링되지만, boolean값, undefined, null은 ..

Vite라는 차세대 프론트엔드 개발 툴을 사용하면 기본설정이 적용된 React app을 생성하는게 가능하다. Vite은 리액트 공식 문서에서도 권장하고 있기 때문에, 오늘날 대부분의 리액트 앱은 vite를 사용해 만들어졌다고 생각해도 무방하다.vite 이용해서 리액트 앱 생성하기npm create vite@latest위와 같은 커멘드 라인을 작성하고 엔터를 치면 진행할건지 묻는 문장이 나온다. y를 입력하면 된다.그 다음에 엔터를 누르면 차례대로 프로젝트 이름, 프레임 워크, 앱의 버전을 묻는데, 원하는 대로 설정해주면 된다.√ Project name: ... section04√ Select a framework: » React√ Select a variant: » JavaScript다 하고나면 폴더가 ..

리액트란? 리액트는 페이스북(현 메타)이 개발한 프론트엔드를 위한 오픈소스 자바스크립트 라이브러리이다.우리는 리액트를 사용해서 복잡한 대규모 웹서비스의 UI를 좀 더 편하고 빠르게 개발할 수 있다. 리액트는 제공하는 기능이 매우 강력하기 때문에 넷플릭스, 페이스북, 인스타그램, 노션등의 오늘날 여러 대규모 서비스들을 지탱하는 기술로 활발히 사용되고 있다.  리액트의 기술적 특징 리액트는 아래와 같은 기술적인 특징을 갖는다.  각 특징에 대해 더 자세하게 알아보자. ① 컴포넌트를 기반으로 UI를 표현한다. 컴포넌트(Component)란 우리말로 "구성요소"로, 화면을 구성하는 요소/ UI를 구성하는 요소를 말한다. 예를 들어 우리가 구현해야 하는 웹페이지가 헤더, 메인, 푸터 세 가지 부분으로 나눠져 있다..

와 난 이게 진짜 명강의라고 생각한다. 리액트에 입문하면서 유명한 강의인 유데미의 React 완벽 가이드 2024부터 구매를 해서 보기 시작했다. 근데 처음부터 많은 개념들을 깊이 있게 다루다보니 사기가 팍팍 떨어졌다. 리액트 입문자의 입장에서 리액트는 하나의 거대한 산처럼 보였다... 배울게 너무 많았고, 시작도 전에 막막해지기 시작했다. 그러던 중 '만들면서 배우는 리액트: 기초' 강의를 접하게 되었다. 이 강의를 통해서 각 개념의 필요성과 사용 시점을 명확히 이해할 수 있게 되었고, 감을 잡게 되었다. 이 강의는 리액트의 핵심 개념을 초보자의 눈높이에 맞춰 설명하고 있고, 실제 프로젝트를 통해 실습을 할 수 있도록 구성돼 있다.  이 강의를 통해 학습할 수 있는 내용은 아래와 같다. 초보자가 꼭 알..

내 프로젝트에 응용할 부분이 많을 것 같아서 아래 유튜브 영상을 보고 대시보드를 따라 만들어보기로 했다.아래 영상에서 setting up project 부분에 해당하는 부분을 따라한 뒤 정리하였다.1. 리액트 프로젝트 생성하기우선 프로젝트 파일을 생성한다.npx create-react-app stock-dashboard2. App.css 파일 수정하기@import@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');Google Fonts에서 Roboto 폰트를 가져온다.:root..

리액트에서 이미지 파일을 저장하는 경로는 크게 두 개로 나뉩니다. 바로 public 폴더와 src/assets 폴더인데요! 각각 어떤 특징을 가지고 있는지 알아보겠습니다.public/폴더public 폴더에 저장된 이미지는 index.html 또는 index.css 파일 내에서 직접 참조할 수 있습니다.public/에 저장된 이미지 및 파일은 프로젝트 개발 서버 및 빌드 프로세스에 의해 공개적으로 제공됩니다.이 파일들은 index.html처럼 브라우저 내에서 직접 방문 및 요청이 가능합니다.public 폴더에 있는 파일은 localhost:5173/파일이름.확장자로 접근하면 볼 수 있습니다.src/assets/폴더src 또는 src/assets/와 같은 하위 폴더에 저장된 모든 파일은 공개적으로 제공되지 ..