React

React와 Node를 연결하다. 1. React와 Node 구성 화면을 구성하는 React와 서버인 Node를 연결할 때의 구성을 그림으로 표현한 것이다. (그림 1) 기존의 Node.js에서는 templete engine(템플릿 엔진)으로 화면에 보일 엔진을 선택하였는데, React와 연결할 거니까 자연스럽게 React가 템플릿 엔진의 역할을 하게 된다. 2. React와 Node 기본 세팅 2 - 1. Node 설치 프로젝트를 진행할 새로운 폴더를 생성하고 폴더에 Node를 설치한다. npm init 명령어를 터미널에서 사용해서 노드 모듈과 package.json 등을 설치한다. github에 프로젝트를 업로드할 때는 노드 모듈을 올리면 안 된다. 다른 사람에게 파일을 공유하거나 공유받을 때 노드 ..

사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 Router를 배우다. 1. React에서의 Router, Route 정의 더보기 # index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { BrowserRouter } from 'react-router-dom' const root = ReactDOM.createRoot(document.getElementById('root')); root.render( // // ); /..

컴포넌트 간에 state를 공유할 수 있게 해주는 Context를 배우다. 1. Context ? 리액트는 상위 컴포넌트에서 하위 컴포넌트로 데이터가 이동하는 단방향 전달 방식(그림 1)이다. 우리가 지금까지 실습했을 때는 컴포넌트의 계층구조가 단순했다. 많아야 3층이었는데, 실제로 프로젝트를 진행하게 되면 컴포넌트의 구조가 복잡해지고 계층이 많아지는 현상이 생길 수밖에 없다. 여태 배운 개념만으로는 예를 들어 5층에 있는 컴포넌트에 최상위 컴포넌트의 state를 전달하기 위해서는 하위 컴포넌트에 props로 하나하나 전달해주는 방법밖에 없다. 이런 현상을 Prop Drilling이라고 한다. 그리고 state의 이름을 변경하면 또 하나 하나 props의 이름을 바꿔줘야 하는 번거로움이 있기 때문에 Co..

컴포넌트 내에서 데이터를 저장하는 공간인 useRef를 배우고 기본변수, state, ref의 차이점을 배우다. 1. Ref Ref를 사용하는 이유 기존에 컴포넌트 내에서 데이터를 저장하기 위해 state를 사용했다. 하지만 state는 값이 변함에 따라 리렌더링 된다는 단점이 있다. 리렌더링이 되면 컴포넌트에서 사용된 내부 변수가 초기화돼버린다. 리렌더링 되더라도 변수가 초기화되지 않는 것이 필요한 것이다. 이것을 해결해 주는 것이 바로 Ref이다. Ref 특징 Ref로 데이터를 관리하면, Ref의 값이 변하더라도 컴포넌트가 리렌더링이 되지 않아서 불필요한 리렌더링 현상이 줄어들어 성능 저하를 방지한다. Ref로 데이터를 관리하는 컴포넌트가 state에 의해 리렌더링 되더라도 기본 변수와는 다르게 값이..

배열에서 특정 조건에 해당하는 요소만 새로운 배열로 만들어주는 filter 함수를 배우다. 1. filter 함수 설명 filter함수는 map함수와 동일하게 배열에 사용할 수 있는 함수이다. map처럼 배열 내 요소들을 하나씩 함수 내 콜백함수를 거치게 하는데, map과는 다르게 filter함수는 조건을 걸어서 해당 조건을 만족하는 배열 내 요소들만 추출해서 새로운 배열을 반환한다. 1 - 1. map과 filter의 차이 let new_array = members.map((member) => member.task === "Front-end") console.log(new_array); let age_27 = members.filter((member) => member.age < 27) console...

자바스크립트의 map 함수를 컴포넌트에 응용하다 더보기 import React from 'react' import menuList from "./data/menu.json" import Button from 'react-bootstrap/Button'; import Card from 'react-bootstrap/Card'; import 'bootstrap/dist/css/bootstrap.min.css'; const Ex02 = () => { console.log(menuList); return ( menuList.map((menu) => ( {menu.category} {menu.name} {menu.price} Buy )) ) } export default Ex02 1. map 함수 /* map()..

컴포넌트 내에서 값이 변하 1. state 란? 기존의 자바스크립트에서는 화면의 특정 값을 변하게 하려면 단순히 해당 변수의 값을 변경시키면 됐다. count의 값을 버튼을 클릭할 때마다 1씩 올리고 화면에 보이게 하기 위해서 기존 자바스크립트에서 방법으로 코드를 작성한 결과↓ 리액트에서는 아무리 버튼을 클릭해도 화면에 실시간으로 값이 변하지 않는 것을 볼 수 있다. 그렇다고해서 count 변수의 값이 변하지 않고 있지 않다는 것을 console 창에서 확인할 수 있다. 그렇다면 count의 값은 정상적으로 변하는데 화면에 변한 값을 출력하고 싶으면 어떠한 방법을 사용해야 할까? 바로 state를 사용하는 것이다. state는 컴포넌트 내부에서 사용하는 데이터를 변경할 때 사용하는 것이다. 일반 변수는 ..

화면에서 UI 요소를 구성하는 최소단위인 컴포넌트를 배우다. 1. 컴포넌트 정의 컴포넌트는 React에서 자주 사용한다. 반복되는 화면의 큰 틀, 일부분 등을 컴포넌트화 해서 app.js 사용할 수 있다. 2. 컴포넌트 사용 2 - 1. 상황 function App() { return ( 아메리카노 3500 아메리카노 3500 아메리카노 3500 ); } 위 코드를 보면 같은 구조의 코드가 반복되는 것을 볼 수 있다. 이러면 코드가 더러워지고 수정하기 불편하다. 이런 상황에서 컴포넌트를 사용하는 것이다. 2 - 2. 컴포넌트 파일 생성 컴포넌트파일들은 src 폴더 내에서 components 폴더를 생성해서 그 안에 컴포넌트 파일들을 생성해서 사용해 준다. 단, 컴포넌트 파일의 이름의 첫 스펠링은 무조건 ..