React 숙련

2023.02.10Styled Components

2023.02.10useState는 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게 해준다. state가 원시 데이터타입이 아닌 객체 데이터 타입인 경우에는 불변성을 유지해줘야 한다. setState를 사용하는 방식에는 또 다른 방식이 있는데, 함

2023.02.10useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook입니다. 쉽게 말해 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶다면? 또는 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶

2023.02.10DOM 요소에 접근할 수 있도록 하는 React Hook 이다. HTML과 javascript를 사용했을 때 우리는 특정 DOM을 선택하기 위해서 다음과 같이 했었다.import "./App.css";import { useRef } from "reac

2023.02.10일반적으로 부모컴포넌트 → 자식 컴포넌트로 데이터를 전달해 줄 때 props를 사용했다. 그러나 부모 → 자식 → 그 자식 → 그자식의 자식 이렇게 너무 깊어지게 되면 prop drilling 현상이 일어난다.prop drilling의 문제점은깊이가

2023.02.10useState, useEffect, useRef, useContext 등 많은 훅을 배우면서 렌더링에 대해 자주 들었다. 리액트에서 리렌더링이 빈번하게 일어난다는것은 비용이 늘어난다는 뜻이기에 전혀 좋은게 아니다. 따라서 이런 불필요한 렌더링을 발생

2023.02.10가상 돔(Virtual DOM)을 이해하기 위해서는 먼저 DOM(Document Object Model)을 이해할 필요가 있다. 브라우저를 돌아다니다 보면 수 많은 컴포넌트로 구성된 웹페이지들을 보게 되는데, 그 페이지를 문서(document)라고 하

2023.02.10리액트에서 리덕스를 사용하기 위해서는 2개의 패키지를 설치해야 한다. vscode 터미널에서 아래 명령어를 입력해서 2개의 패키지를 설치하자. 참고로 react-redux 라는 패키지는 리덕스를 리액트에서 사용할 수 있도록 서로 연결시켜주는 패키지

2023.02.11Props로 State를 공유하는 방법에는 불편한 점이 있다.컴포넌트에서 컴포넌트로 State를 보내기위해서는 반드시 부-모 관계가 되어야 한다.조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할때도 반드시 부모 컴포넌트를 거쳐야만 한다. 즉, 정작