React.JS

사용자가 요청한 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( // // ); /..

클래스 컴포넌트의 생성부터 소멸까지 이르는 일련의 과정인 Life Cycle을 배우다. 1. Life Cycle (그림 1) Life Cycle은 React의 클래스 컴포넌트의 생성부터 소멸까지 이르는 일련의 과정이다. 이것을 활용해서 컴포넌트가 생성되는 각 과정에서 실행되는 함수를 이용해서 내가 원하는 시점에서 원하는 동작을 하도록 구현이 가능하다. (그림 2) Life Cycle의 과정은 3단계가 있다. 컴포넌트가 생성되는, 컴포넌트가 화면에 처음 그려지는 상태인 Mounting, 컴포넌트가 생성되고 난 후 props, state, force Update의 변화가 생겨서 렌더링, 리렌더링 될 때, 부모 컴포넌트가 갱신이 되었을 때를 가리키는 Updating, 컴포넌트가 화면에서 사라진 상태인 UnMo..

컴포넌트 내에서 데이터를 저장하는 공간인 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()..

props와 state의 차이점을 알아보고 두 개념을 이용해서 컴퓨터와 경쟁하는 주사위 게임을 만들다. 1. props와 state 차이점 props는 부모컴포넌트에서 자식컴포넌트로 데이터를 객체형태로 보낼 때 사용한다. 하지만 props는 수정이 불가하고 각 자식 컴포넌트에서 고정된 채로 사용된다. props를 자식컴포넌트에서 변경하고 싶으면 state를 사용해서 변경해서 사용해야한다. 그림 2는 일반적으로 props와 state가 사용되는 흐름을 나타낸 것이다. 부모 컴포넌트에게서 props를 받고 그것을 state로 자식 컴포넌트에서 필요한 데이터로 변경해서 사용한다. props와 state개념을 사용해서 컴퓨터와 내 주사위 중 값이 큰 것이 나온 쪽이 이기는 게임을 만들어 보겠다. 2. 실습 전체..

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

JSX문법 실습 index.js // index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; // JSX 문법 및 특징 정리 import App from './App'; import reportWebVitals from './reportWebVitals'; // JSX문법을 활용한 실습 import AppSample from './AppSample'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( // // ); // If you want to start measuring performan..