리액트

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

컴포넌트 간에 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...

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

컴포넌트 내에서 값이 변하 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 폴더를 생성해서 그 안에 컴포넌트 파일들을 생성해서 사용해 준다. 단, 컴포넌트 파일의 이름의 첫 스펠링은 무조건 ..

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..