국비교육과정 정리/React6 [React] ContextAPI ContextAPI 데이터를 전역으로 관리할 수 있도록 한다. Reat를 하다보면 여러 컴포넌트를 겨친 후 자료를 전달해야 하거나 동시에 같은 자료를 사용해야하는 경우가 있다. 이 때 Context는 컴포넌트 간에 어떠한 값을 공유할 수 있도록 하는 기능이다. 원래는 props를 이용해서 데이터를 전달해야 하지만 다음 그림과 같이 복잡한 형태라면 props로 전달하는 것이 너무 복잡해지는 한계가 존재한다. ContextAPI 생성 (ContextAPI.js) const 사용할이름 = createContext(초기값) import { createContext } from "react"; //컨텍스트 기본상태 지정 const ColorContext = createContext({color: "red"}); .. 국비교육과정 정리/React 2023. 1. 25. [React] React에 CSS 적용하기 React CSS 적용 리액트에 스타일을 적용하는 방법은 세 가지 방법이 존재한다. 1. 태그에 직접 지정하기 2. 일반 css파일로 적용하기 3. css모듈로 적용하기 1. 태그에 직접 스타일 지정하기 태그에 직접 스타일 속성을 작성하는 방법으로 스타일 속성은 객체로 주어야하며, css 속성 중 - 을 사용하지 않고 카멜표기법으로 대체해서 작성해야한다. 🤔 카멜표기법 단어 전체적으로 소문자를 사용하지만, 맨 첫 글자를 제외한 각 합성어의 첫 글자만 대문자로 표기하는 방식 ex) background-color -> backgroundColor, text-align -> textAlign 태그에 스타일 지정하는 방법도 두 가지로 나뉜다. 1) 객체를 만들어 객체 안에 스타일 속성을 작성하고, 태그 안에서 .. 국비교육과정 정리/React 2023. 1. 18. [React] Hook(훅) Hook Hook는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에 내장된 함수를 뜻한다. Hook에는 함수 컴포넌트의 상태 관리를 할 수 있도록 하는 useStata, 랜더링 직후 작업을 설정하는 useEffect() 등의 기능을 제공하며 기존 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 가능하도록 하였다. ❗ Hook 사용 규칙 - 함수형 컴포넌트에 포함된 함수에서 Hooks을 사용하면 안되고 함수 컴포넌트 최상위에서만 사용해야 한다. - 컴포넌트가 랜더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것을 보장한다. - 클래스 컴포넌트에서는 Hooks 사용 불가하다. 1) useState useState 관련해서는 아래에 작성해두었으니 참고 https://mjlee4330.tist.. 국비교육과정 정리/React 2023. 1. 17. [React] Map, Filter를 이용한 컴포넌트 응용 Map, Filter를 이용한 컴포넌트 응용 목록 요소들(li 태그)을 반복처리하고자 한다면 map을 이용하면 된다. map 을 이용해 컴포넌트를 반복시킬 경우 반드시 요소에 key props를 전달해야 한다. 🤔 Key? key는 요소에 고유성을 부여하는 속성이며 어떠한 항목을 변경, 추가 혹은 삭제하고자 할 때 해당 항목을 식별하기 위해서 사용된다. 리랜더링되었을 시 랜더링 전 key의 위치와 랜더링 이후 key의 위치를 비교하여 변경된 항목을 비교하게 되는데 만약 key 속성을 부여하지 않는다면 해당 요소의 위치를 찾을 수 없으므로 변경이 제대로 반영되지 않고 이상한 결과가 나타날 것이다. 일반적으로 key 값으로 랜덤으로 생성된 문자열(UUID or nanoId) 혹은 db의 pk값 처럼 중복되지.. 국비교육과정 정리/React 2023. 1. 17. [React] State, Event State State란 컴포넌트 내부에서 변경될 수 있는 데이터를 관리해야할 때 사용되는 객체이다. 데이터가 변경이 되는 경우 변화를 감지하여 컴포넌트를 다시 리랜더링시킨다. 클래스/함수형 컴포넌트에 따라 사용방법이 다르며, 함수형 컴포넌트에선 hook을 이용해 좀 더 간편하게 사용할 수 있다. cf) props는 컴포넌트 내부에서 값을 변경할 수 없지만 state는 컴포넌트 내부에서 변경이 가능하다. state 특징 - state는 타입을 구분하지 않는다.(str, number, obj ....) - state는 직접 수정해서는 안되며, 값을 변경하고자 한다면 반드시 set 함수를 이용해서 변경해야 한다. 🤔 set함수를 이용해서 변경해야하는 이유 state는 immutable(불변성)을 유지해야하기 .. 국비교육과정 정리/React 2023. 1. 16. React REACT 자바스크립트의 라이브러리로 MVC, MVVM과 같은 구조가 아니며 SPA 방식으로 View만 처리한다. SPA? Single Page Application 의 줄임말로 웹 페이지가 여러 페이지로 구성되어 있는 것이 아닌 서버에서 페이지를 하나만 제공하는 것이다. ( = 번들러(Webpack)를 통해서 index.html 하나만 로드하고 실행시키는 구조) 그렇다면 사용자는 오직 하나의 페이지만 볼 수 있는가? 서버에서 제공하는 페이지는 오직 하나이지만 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여줄 수 있다. 🤔 번들러(Webpack)? -> Node.js 에서 기본적으로 제공되는 패키지로 어플리케이션을 동작시키는데 필요한 자원(JS파일들, CSS, Image 등)을 하나로 묶어 경량화.. 국비교육과정 정리/React 2023. 1. 15. 이전 1 다음
