ijooha 님의 블로그

[react/공부] useContext

useContext 알아보기         useContext란? useState는 데이터를 최상단 컴포넌트에서 생성한 후 props로 자식 컴포넌트에 계속 전달해야 한다.이를 props drilling이라고 한다. 이를 해결하기 위해 등장한 것이 useContext다.전역 상태 관리 도구는 아니지만, 특정 상태를 전역처럼 쉽게 공유할 수 있도록 도와준다. createContext, useReducer, Provider 등을 활용해1. context 폴더에서 상태를 관리하고2. 필요한 컴포넌트에서 useContext를 통해 가져다 쓰면 된다.           context.js 크게 다섯 가지 단계로 나뉜다.액션 정의초기값 생성reducer 함수createContextProvider  01 액션 정의액..

[react/공부] useRef

useRef 알아보기         useRef란? state와 마찬가지로 특정 값을 저장하지만, state와 다르게 값이 변경되어도 컴포넌트가 다시 렌더링되지 않는다. 즉, 렌더링과 관계없이 내부에서 값을 계속해서 유지하는 역할을 한다.          코드 형태 const ref = useRef(초기값); // { current: 값 } 형태          사용 예시 01 기본 예시import { useRef } from 'react';function Counter() { const countRef = useRef(0); const increase = () => { countRef.current += 1; console.log(countRef.current); }; return ..

Styled Components 알아보기          Styled Components란? JavaScript 파일 내에서 CSS를 작성할 수 있도록 도와주는 라이브러리다.컴포넌트 단위로 스타일을 관리할 수 있어서 유지보수가 쉽고 가독성이 좋다.          세팅하기 01 패키지먼저, 사용하고자 하는 프로젝트 터미널에서 패키지를 설치한다.yarn add styled-components   02 확장 프로그램 추가왼쪽 블럭처럼 생긴.. 확장프로그램 설치하는 곳으로 가서'VScode-styled-components'를 검색한 후 설치한다.          사용하기 01 Importimport styled from 'styled-components';사용할 컴포넌트의 상단 부분에서 styled-compo..

babel과 webpack, plugin 알아보기맨 밑에 한눈에 보기 정리 있다!  CRA(Create React App), Vite를 사용하지 않고 애플리케이션을 구성하는 방법을 정리해 보려 한다.위 두가지는 간편하게 자동으로 모든 것을 설정해주지만 커스터마이징에 제약이 많아 실무에 한계가 있다고 함        초기 설정 01 파일 만들기먼저 프로젝트 폴더를 만든 후, 몇가지 파일을 세팅해준다.index.htmlsrc > App.jssrc라는 폴더 안에 App.js 파일  02 react dom 세팅html 파일 안에 root div를 넣어준 후CDN을 통해 react와 reactDOM을 로드한다. (설치 없이 React를 사용할 수 있다.)          Transpiler 프로그래밍 언어의 코드..

useState로 부모 자식 컴포넌트 상속 알아보기  우선 html을 보면 자식 부모 요소들이 있다.그와 마찬가지로 컴포넌트도 부모 자식, 형제 관계들이 있는데파일을 따로 만들어 관리하고 (리액트 장점, 유지 보수가 용이)그 파일들을 부모 자식 간 연결을 시켜주면 된다.(형제끼리 연결하고 싶다면, 부모에게 거쳐서 다른 형제로 이동)         예시 먼저Mom이라는 부모 컴포넌트와Child라는 자식 컴포넌트,Sister라는 형제 컴포넌트가 있다고 가정해보자.** 컴포넌트를 쓸 때는 항상 첫 글자가 대문자다. 파일명도 마찬가지 Mom.jsxfunction Mom() { const sendToChild = 'from mom, to child' //html return ( ..

Hook 알아보기추가로 보면 좋을 링크        Hook? Hook을 사용하면 컴포넌트에서 더 많은 react 기능을 사용할 수 있다.react hook은 정말 다양한데, 가장 중요하고 많이 사용하는 두가지 (state hook, effect hook)을 알아보겠다.         State Hook 전 게시글에서 얘기한 바 있는 그 state가 맞다.State를 통해 컴포넌트는 사용자의 입력과 같은 정보를 기억할 수 있다.전 게시글에서 소개한 사이트의 경우 나라명과 메달 개수를 기억하도록 했다.const ['상태 값', '상태를 변화시키는 함수'] = useState('초기값')상태를 변화시키는 함수를 통해 변하는 값을 계속 저장하고, 상태값으로 이를 렌더 등으로 사용한다.         Effec..

React 시작하기react 공식 페이지         React? 리액트는 작업을 더 효율적으로 하기 위해 만들어진 라이브러리인데,큰 특징이 하나 있다. 변경사항이 생기면 웹 전체를 다시 구축하는 대신가상 DOM과 컴포넌트, state를 통해 변경된 부분만 업데이트 한다. 가상 DOM은 실제 DOM의 가벼운 사본으로, 변경된 부분만 찾아서 실제 DOM에 반영하기 때문에,렌더링 성능을 최적화할 수 있다.         React 시작하기 ** 노드가 설치된 상태여야 함먼저 프로젝트를 생성해준다.그냥 리액트, 그리고 vite 두가지 방식이 있는데 후자가 훨씬 효율적이므로 그것만 정리하겠다. 터미널을 연 후yarn create vite --template react꺽쇠 없이 프로젝트명을 적어주면 된다. 후..

'올림픽 메달 사이트 만들기'과제로 리액트 입문하기GitHub 바로가기         과제 개요 올림픽의 메달 순위를 업데이트 하여, 각 국가별 금, 은, 동, 그리고 총 메달 수를 확인할 수 있는 페이지이다.사용자는 필터 옵션을 통해 메달 종류나 총 메달 수에 따라 국가 순위를 정렬할 수 있다.• 나라와 메달 개수 입력하고 버튼을 클릭해 하단 리스트에 정보 추가 혹은 업데이트• 정렬 옵션 선택으로 리스트 재정렬• delete 버튼으로 리스트 삭제 리액트 구조를 이해하고 state나 props를 적용하기까지가 좀 시간이 걸렸고, 그 외는 할만했던 거 같다!         컴포넌트 구성 App├── Form│ ├── Country│ ├── Medal│ └── Btn└── List └──D..