프론트엔드 개발

[React] useCallback, useMemo 사용하기

소개 prop가 새로 전달되었을때 또는 내부 state가 변경되었을때 리렌더링이 일어난다. 어디가 변경되었는지 확인하고 변경된 부분만 리렌더링 해야하는데 성능때문에 얕은 비교를 한다. 특히 참조 타입(함수)의 경우 얕은 비교 때문에 원치 않은 부분까지 전부 리렌더링 될 수 있는데 useCallback, useMemo 를 통해 이를 방지해주어야 한다. 원시 타입 얕은 비교 참조값(메모리주소)이 달라져도 값만 같으면 같은 것으로 간주 → 리렌더링 X 참조 타입 얕은 비교 참조값(메모리주소)이 달라지면 변경된 것으로 간주 → 리렌더링 O 불필요한 리렌더링 일어나는 경우 *이렇게 쓰면 안됨! 하위 컴포넌트에 전달하는 콜백 함수를 인라인함수로 사용 console.log("123")}/> 컴포넌트 내에서 로컬 함수..

리액트 props.children 이란 무엇인가?

소개 props.children 는 특정 컴포넌트 내부에 다른 컴포넌트를 배치시키고 싶을 때 사용합니다. 아래 코드의 결과는 Hi 입니다. div안에 button이 들어가는걸 원하겠지만, Box컴포넌트는 Hi를 반환하는 기능밖에 업습니다. const Box = (props) => Hi; const App = () => { return ( 버튼 } } → 결과는 Hi div안에 button이 들어가도록 하기 위해서는 props.children으로 전달하여 내부 컴포넌트를 렌더링 해줘야합니다. const Box = (props) => {props.children}; const App = () => { return ( 버튼 } } → 결과는 버튼

React - 프로젝트에서 이미지 경로 찾기

관리 폴더 public 폴더 webpack에 의해 관리됨 PUBLIC_URL 환경변수를 통해 접근 폴더 접근가능 파일 못찾으면 컴파일에러 없이 파일 깨짐 src 폴더 webpack에 의해 관리됨 (import하여 사용가능) 파일 못찾으면 컴파일 에러 발생 import logo from "경로"; require로 불러오기 가능 추가 팁 VS code는 jsconfig.json로 에디터에 대한 설정 및 기타 javascript에 대한 설정을 조작가능 index.html 위치한 곳에 jsconfig.json 파일을 생성해준다. 아래와 같이 작성해주면 경로 입력시 src 경로를 기본디렉토리로 하여 찾아준다. { "rootDir": "src", "compilerOptions": { "baseUrl": "src",..

styled components 사용 방법

소개 css를 컴포넌트 처럼 선언하여 사용할 수 있다. 리액트 컴포넌트 내부에서 작성하여 매우 빠르게 스타일을 적용시킬 수 있다. Local 하게 사용하는 방법과 Global 하게 사용하는 방법 두가지가 있다. 설치 # npm i styled-components 사용법 1. Local 하게 사용하는 방식 아래와 같이 CSS 스타일을 컴포넌트 처럼 사용할 수 있다. // 컴포넌트.js import styled from "styled-components" const Header = styled.header``; const List = styled.ul` display: flex; &:hover { background-color: blue; } `; const 컴포넌트 = () => { return ... }..

React Redux (리액트 리덕스)

리덕스란? 리액트 뿐만 아니라 다양한 프레임워크에서 사용되는 상태관리 라이브러리이다. 리액트는 MVC (Model View Controller) 중에 View만 담당하게 되는데 나머지 Model, Controller에 해당하는 역할을 해주는 것이 Redux이다. 사실 이 MVC 페턴은 어플리케이션이 매우 복잡해져서 동시에 여러 Model을 업데이트하면 예상치 못한 일이 일어날 수 있는 문제가 있다. 왜냐면 너무 규모가 커지면 Model 이 다른 Model을 업데이트하거나 View가 Model을 업데이트 하거나 하는 식으로 거미줄 처럼 서로가 엮이게 되기 때문이다. 그래서 Flux 패턴이라는 것이 등장하였으며, Redux는 이 Flux 페턴을 구현한 것이다. 이 Flux 패턴은 어플리케이션을 단방향으로 일..

React - useEffect 훅 사용하기 (훅에서 async await 함수 사용 포함)

가져온 데이터를 첫 화면에 출력하고, 업데이트 될 때마다 다시 렌더링하고자 할 경우? 클래스형 컴포넌트를 쓸 경우 라이프사이클 함수를 통해 처리하면 된다. 그러나 두 함수에 같은 코드를 중복으로 넣어야한다. componentDidMount() { ... } componentDidUpdate() { ... } 함수형 컴포넌트 + React Hook을 쓸 경우 useState() + useEffect() 조합을 사용하면 된다. useEffect() 가 componentDidMount()와 componentDidUpdate() 기능을 모두 담당한다. import React, { useState, useEffect } from "react"; const [count, setCount] = useState(0);..

React 모듈 - react-route-dom (라우터 기능)

개요 react-router-dom 은 새로고침 없이 URL 주소에 따라 다른 화면을 렌더링해주는 패키지이다. Quick Start : https://reactrouter.com/web/guides/quick-start 설치 npm i react-router-dom 사용법 import {HashRouter, Route} from "react-router-dom"; Router 내부에 여러 Route들을 포함하는 구조이다. (Hash or Browser) Router는 History API를 이용하여 새로고침 없이 주소 변경이 가능하게 해준다. Route는 path 속성에 url를 지정하고, 그 경로에 접근시 렌더링할 구문 또는 컴포넌트를 지정할 수 있다. path="경로" component={경로접근시 ..

React - 새 프로젝트 생성

자바스크립트를 사용하려면 node.js 를 먼저 설치해야한다. React 단계까지 왔다면 당연히 이미 했을거라서 pass 하겠다. npx create-react-app 프로젝트명 npx는 신규 버전 다운받고 설치 끝나면 지우는 방식입니다. 사용하지 않는 오래된 버전의 모듈을 컴퓨터에 저장하지 않게 해주는 큰 장점이 있습니다. 기본적으로 현재경로 아래의 "프로젝트명"으로 프로젝트를 생성하게되는데 프로젝트의 폴더는 사전에 만들어도되고 안만들어도 상관은 없는것 같습니다.

리액트 라이브러리 gh-pages 깃 페이지 배포하기

터미널에서 레포지토리 이동 npm i gh-pages 수행 package.json에 아래 내용추가 ※ deploy를 수행하면 predeploy가 자동으로 수행되는 방식임. "scripts": { "start": "react-scripts start", "build": "react-scripts build", "deploy" : "gh-pages -d build", "predeploy" : "npm run build" }, ... "homepage" : "https://깃아이디.github.io/깃레포지토지명/" npm run deploy 수행 > npm run build > react-scripts build Creating an optimized production build... Compiled su..

SCSS - CSS를 프로그래밍 언어처럼 작성하자

SCSS scss는 css를 좀 더 프로그래밍 언어처럼 다룰 수있게 해준다. (변수, 함수 등) 편리하게 scss파일을 작성한 것을 컴파일하여 css로 변환하여 사용해야한다. 이 변환하는 방법에 몇 가지 방법이 있는데 VS Code extension sass, live sass compiler 등이 있다. gulp VS Code가 아닌 환경인 경우 gulp를 사용할 수 있다. gulp 모듈 - Node.js기반 프로세스 자동화 도구 gulp 설명 : gulp는 Node.js 기반의 프로세스 자동화 도구이다.A 파일을 변경할 때마다 B파일을 엎어쳐야하는 등의 지루하고 반복적인 작업을 자동화 시킬 수 있다. 우리는 gulp를 이용하여 scss 파일을 11001.tistory.com scss 파일을 여러 파일..