React (Front-end)

(React 다국어 웹 만들기) 1. Vite를 통한 React 프로젝트 세팅

프로젝트 세팅 터미널에서 yarn create vite를 통해 vite 세팅을 실행시키고, 메뉴에서 React -> Javascript 스택을 입력한다. Vite를 통해서 만든 프로젝트는 임의로 다른 실행 명령(script)이 삽입되어있다. 확인해보고 해당 명령어를 쳐보자. 오류가 날 경우 만약에 vite command not found가 뜰 경우에는 vite 모듈이 설치가 안되어 있는 것이다. npm i vite@latest로 과감히 최신 버전을 설치한다. npm install vite@latest 테스트 프로젝트에 특정 버전을 명시하는 것은 하남자 특이다. 설치한 이후에 개발 실행(dev)을 해보면 아래와 같이 뜬다. 이렇게 웹 페이지가 뜨면 정상적으로 프로젝트가 세팅되었다.

React에서 동적으로 스타일링하기 (삼항연산자, CSS 적용)

리액트에서 강력한 부분이 바로 조건부 렌더링이다. 조건부 렌더링에 대해 알아보기: https://ko.reactjs.org/docs/conditional-rendering.html 조건부 렌더링 – React A JavaScript library for building user interfaces ko.reactjs.org 이 부분은 JSX에서만 적용되는 것이 아니라 CSS 스타일링에서도 적용이 가능하다. 아래는 예시이다. import React, { useState } from 'react'; import Button from '../../UI/Button/Button'; import './CourseInput.css'; const CourseInput = props => { const [entered..

(React) useState hook의 setState를 통해 여러 값의 상태값을 저장하고 싶을 때

0. 리액트에서 state 관리를 하는 방법 setState를 통해 여러 개의 값을 상태관리하려고 할 때 온갖 방법이 있다. 하나의 변수를 관리할 때 보통 이렇게 배운다. 변수명이 userInput인 경우 const [userInput, setUserInput] = useState('') 리액트를 배우는 첫 단계의 걸음마 단계에 배우는 것이기 때문에 대부분 사람들이 다 안다. 하나의 컴포넌트에서 값을 2개 이상 관리한다고 할 때 어떻게 해야 할까? 1. 첫 번째 - useState를 여러 번 반복한다. 단순하다. useState를 반복하는 것이다. // 선언부 const [enteredTitle, setEnteredTitle] = useState(""); // 초기값 string const [entere..

리액트를 공부하는 순서와 공부해야할 것들, 샘플 프로젝트 추천

리액트로 몇 가지 프로젝트를 진행하면서 공부해야 할 체크리스트를 만들어봤습니다. 본인이 리액트를 공부하면서 아래의 목록을 모두 할 수 있는지 확인해 보는 것도 좋겠네요. 첫 번째, 리액트의 기초 개념에 대해서 (초급) 리액트를 하다보면 엄청나게 많은 의존 모듈을 설치하게 됩니다. 상태관리를 Context API에서 redux로 넘어가는 것처럼, 리액트가 가지고 있는 기능만으로는 빠르게 기능을 개발하기 어렵습니다. (그만큼 생태계가 잘 되어 있다는 뜻이겠죠.) 리액트 자체만 놓고 보면 초보 단계에서는 4가지를 공부해야 합니다. 1. 컴포넌트와 UI를 만드는 방법 : 여러분이 직접 컴포넌트를 만들어보는 것입니다. 컴포넌트를 만들고 컴포넌트끼리 결합하세요. 양쪽 컴포넌트에서 서로를 호출하고, 한쪽을 포함시켜 ..

React 프로젝트 시작하는 여러가지 방법

1. CRA npx create-react-app 프로젝트명 -> 원래는 npm install -g create-react-app을 한 후 create-react-app을 실행해야하지만, npx로 바로 모듈을 실행할 수 있다. 2. yarn을 이용한 방법 yarn은 npm install -global yarn으로 설치한다. yarn create react-app ./ yarn start 3. vite을 이용한 방법 1) NPM 방법 npm 버전 6일 때 npm create vite@latest 프로젝트명 --template react npm 버전 7이나 그 이상일 때 (-- 가 한 번 더 들어감) npm create vite@latest 프로젝트명 -- --template react 2) Yarn 방법 ..

(React Router) 5. 중첩 라우팅

이전 글: https://moneytech.kr/72 (React Router) 4. contact.jsx 생성과 라우팅 이전 글: https://moneytech.kr/71 (React Router) 3. global layout을 추가해보자 이전글: https://princox.tistory.com/70 1. Root Route 구현하기 src 폴더 내에 routes라는 폴더를 구현하고 그 안에 root.jsx 파일을 생성합니다. moneytech.kr 1. 중첩 라우트의 목표 우리의 중첩 라우트라는 것은 루트 라우트 안에서 화면 라우팅이 되는 것이다. contact route를 root route 내부의 자식으로 만들어 줍니다. src/main.jsx const router = createBrows..

(React Router) 4. contact.jsx 생성과 라우팅

이전 글: https://moneytech.kr/71 (React Router) 3. global layout을 추가해보자 이전글: https://princox.tistory.com/70 1. Root Route 구현하기 src 폴더 내에 routes라는 폴더를 구현하고 그 안에 root.jsx 파일을 생성합니다. mkdir src/routes touch src/routes/root.jsx 꼭 커맨드를 사용할 필요 없습니 moneytech.kr 1. Contact Route UI 404 Not Found 페이지 대신에 실제로 무언가를 그려보자. 새로운 URL 링크를 걸기 위해서는 새로운 라우트가 필요하다. src/routes/contact.jsx를 만들자. touch src/routes/contact.j..

(React Router) 3. global layout을 추가해보자

이전글: https://moneytech.kr/70 (React Router) 2. 기본 CSS, JS, JSX 세팅과 Root Route 설정 1. 기본 CSS, JS 파일 세팅 이 튜토리얼은 데이터 만들기(create), 읽기(reading), 검색하기(searching), 수정(update), 삭제(deleting)하기를 다룹니다. 전형적인 웹 앱의 경우 웹 서버의 API와 소통하겠지만, 이 moneytech.kr 1. Root Route 구현하기 src 폴더 내에 routes라는 폴더를 구현하고 그 안에 root.jsx 파일을 생성합니다. mkdir src/routes touch src/routes/root.jsx 꼭 커맨드를 사용할 필요 없습니다. 에디터에서 클릭으로 만들어도 됩니다. src/r..