Router(라우터) : 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리 - spa에서 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 컴포넌트만 가져와 다른가져와 다른 페이지를 나타내는 방식을 지원 - 라우팅 : 사용자가 요청한 url에 따라 해당 url에 맞게 페이지를 보여주는 것 - 이전 mpa : 새로운 페이지를 로드하며 페이지를 이동하는 방식 ex) 서브페이지 1. 라우터 설치하기 : 새 터미널 열어 npm install react-router-dom 을 복사해 붙여넣는다. 2. 라우터 사용하기 1) 상위 컴포넌트에 라우터를 적용 : 컴포넌트 index.js 파일 2) 경로에 따라 보여질 component를 설정 : , 컴포넌트 3) 컴포넌트로 지정한 ..
1. 먼저 아래 url주소를 클릭하여 들어간다. https://react-icons.github.io/react-icons React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm install react-icons --save Usa react-icons.github.io 2. 쓰고싶은 파일에 터미널을 열러 아래 패키지 코드를 복사해서 붙여..
useReducer : 여러 개의 상태를 쉽게 관리하기 위해 사용된다. 1. useState와의 차이점 - useState는 설정하고 싶은 상태를 직접 설정하고 지정하여 상태를 업데이트함 - useReducer은 액션(action)객체를 기반으로 상태를 업데이트함 2. useState와의 공통점 - useState와 마찬가지로 useReducer도 호출 시 배열이 반환된다. - useReducer의 반환된 배열의 형태 : [상태, dispatch함수] 3. useReducer가 실행되는 순서도 dispatch함수 : dispatch가 reducer에게 상태를 요청함 (이 때 dispatch가 요청한 값인 action객체 생성됨) reducer함수 : dispatch가 요청한 action객체를 받아서 상태..
useMemo, useCallback ☞ 리엑트 성능 최적화 - 컴포넌트가 렌더링 ☞ 컴포넌트 함수를 호출하여 실행됨 - 함수 실행될 때 함수 내부에 선언된 표현식(변수, 다른함수 등)도 다시 선언되어 사용 - 컴포넌트는 자신의 state가 변경되거나, 부모에게서 상속된 props가 변경될 때마다 리렌더링 1. useMemo : 함수를 반환하지 않고 함수의 특정 결과 값을 memoization해서 재사용 - Memo란? memoization을 뜻함 : 계산된 결괏값을 저장해놓고 있다가 나중에 리렌더링 될 때 해당 함수 재호출이 아닌 저장된 결괏값을 그대로 불러서 갖다 써준다. (중복 연산을 막아줌) 기본 구분 > // [deps] : 의존성 배열 (의존해야 할 값을 배열에 담아줌) const myValu..
패키지 설치 > 1) 아래의 url주소에 들어가서 코드를 복사한다. (다양한 예제도 있으니 참고할 것!) https://styled-components.com/docs/basics#installation styled-components: Basics Get Started with styled-components basics. styled-components.com 2) 적용할 컴포넌트에 터미널 열어서 복사한 코드를 붙여넣고 enter를 누른다. 적용방법 > 1. 기본구문 import React from 'react'; import styled from 'styled-components'; // styled 작성 시 import styled from 'style-components' 가 자동으로 불러와짐 ..
Context API : 리엑트 컴포넌트 트리 내에서 전역으로 관리해야 할 데이터들을 관리해주는 역할 1. context 생성하기 - context : 전역데이터를 담고 있는 저장공간 // context 폴더 만들어 안에 여러 contex컴포넌트들을 만들기 import {createComtext} from 'react'; // export로 내보내기 해야만 다른 컴포넌트에서 불러와 사용할 수 있다! export const MyContext = createContext(초기값); 2. context 사용하기 // context폴더 안에 있는 MyContext.js파일을 불러옴 import {MyContext} from './context/MyContext' // mycontext라는 변수에 MyContex..
useEffect 를 사용하면 컴포넌트가 렌더링 될 때마다 특정 작업을 수행할 수 있게 함 구문 : useEffect(콜백함수) 1) 렌더링 될 때마다 매번 실행하기 useEffect(() => { 실행할코드; }) 2) 화면에 첫 렌더링 될 때 실행하기 (마운트되고 딱 한 번만 실행) useEffect(() => { 실행할코드; }, []) // 빈 배열을 넣음으로서 구독하는 값이 없다는 걸 확인시켜줌 // 마운트나 렌더링이 되든 말든 신경 쓰지 않음 3) 화면에 첫 렌더링 될 때 실행 + value값이 변경될 때만 실행하기 useEffect(() => { 실행할코드; }, [value]) 4) 마운트 됐을 때 실행 + 언마운트 됐을 때 실행하기 useEffect(() => { 마운트 됐을 때 실행할코..
Ref : 컴포넌트의 전 생애주기동안 유지되는 값 - 전 생애주기란? 컴포넌트의 마운트(생성)부터 언마운트(소멸)될 때까지를 의미 - 컴포넌트가 리렌더링 되어도 언마운트 될 때까지 값이 유지됨 렌더와 리렌더링 1. 렌더 : render()함수를 통해 화면에 그려주기 2. 리렌더링 : 부모요소가 주는 props나 state(상태)가 변경 / 업데이트되었을 때 다시 화면에 그려줌 (이 때, render() 함수가 다시 호출됨) State나 Props의 값이 변경될 때 / Ref값이 변경될 때 차이점 state나 props 변경 / 업데이트 ☞ 렌더링 발생 ☞ 컴포넌트 내부 변수들 값 초기화(이때 Ref의 값은 유지) Ref값 변경 ☞ 렌더링 발생X ☞ 컴포넌트 내부 변수들 값 유지 1. Ref 생성하기 : ..
1. inline styling : HTML태그 안에 직접 입력하는 방법 style={} json형식(객체)으로 {속성명: 속성값}으로 입력 속성명은 (-)대신 커멀케이스 방식을 사용함 커멀케이스 ex) font-size ☞ fontSize / font-weight ☞ fontWeight 리액트 스타일 적용방법! 2. javascript object : 컴포넌트 내에 변수를 선언하여 해당 HTML태그에 style={변수명}을 주는 방법 const textStyle = { fontSize: '36px', color: 'green' } 리액트 스타일 적용방법! 3. css 파일 작성 : 작성한 css파일을 불러와 style을 적용하는 방법 import './style.css'; 4. scss 사용하기 : n..
컴포넌트 : 프로그래밍에 있어 재사용이 가능한 각각의 모듈 - 컴포넌트 기반 프로그래밍을 하면 레고 블럭처럼 컴포넌트들을 조합하여 화면을 구성 - 웹 컴포넌트는 컴포넌트 기반 프로그래밍을 웹에서도 적용할 수 있도록 W3C에서 새로 정한 규격 - 옛날에는 클래스형 컴포넌트를 주로 사용하였으나, 요즘은 함수형 컴포넌트를 많이 씀 ! 1. 함수형 컴포넌트 선언하기 편리하다. 메모리 자원 사용도가 클래스형보다 작다. 프로젝트 완성 후 배포할 때 결과물의 파일크기가 클래스형보다 작다. 구문 > import React from 'react'; // 1) 함수 바로쓰기 function FunCompo() { return ( ) } // 2) 화살표 함수로 쓰기 const FunCompo = () => { return..