리액트(41)
-
[React] 리덕스 간단하게 알아보기
드디어 리덕스를 공부하기 시작했다. 유데미 강의에서 나온 리덕스의 간단한 개요를 짧게 정리해본다. 📌 들어가며 리액트는 그야말로 '상태 관리'가 로직의 핵심이다. 이 상태 관리는 애플리케이션이 작을 때는 props 로 관리가 가능하지만 무한히 늘어나는 페이지(컴포넌트)와 그에 따른 상태들을 관리하다보면 한 컴포넌트 안에서도 엄청나게 많은 props를 생성해서 내려보내주어야 하고, 개발하다보면 c 컴포넌트에서 d 컴포넌트로 props를 내려주면 될 줄 알았는데 실은 b에서 내려줘야 해서 그냥 a 컴포넌트로 state를 올려버리는 경우도 생긴다. 이런 경우들을 해결하기 위해 리액트에서는 자체적으로 상태관리를 위해 context 라는 메소드를 가지고 있지만 아쉬운 부분이 있다. State를 사용하는 범위에 따..
2023.04.17 -
[React] 컨텍스트 Context 알아보기
해당 내용은 SOAPLE 님의 처음 만난 리액트(React) 강좌에서 발췌하였습니다. 📌 들어가며 리액트에서 상태관리를 할 수 있는 방법은 다양하게 존재한다. 상태관리 라이브러리를 쓰기 전에 리액트 내장 훅으로 사용할 수 있는 Context API에 대해서 공부해보고자 한다. 📌 context란 리액트 개별 컴포넌트들은 props를 통해 데이터를 전달한다. (부모 ➡️ 자식) props를 통해 데이터를 전달하게 되면 다수의 컴포넌트에서 필요한 데이터는 Props Chain(Drilling) 현상이 일어난다. 이를 해결하기 위해 Context가 발전했다. 📌 context의 원리 리액트를 props 방식으로 운영할 때는 아래 그림과 같이 props를 props가 위치한 컴포넌트에서 필요한 컴포넌트까지 컴포..
2023.03.22 -
[Javascript] bind 알아보기
bind 알아보기 해당 예시는 코어 자바스크립트의 '함수 바인딩'을 참조하였습니다. 📌 들어가며 유데미 강의 중 bind에 대해 설명하며 'bind는 향후 실행을 위해 함수를 사전에 구성한다. 기본적으로 함수가 실행될 때 받을 인수를 미리 구성할 수 있다.'라고 설명하는데, bind에 사용법에 대해 추가로 더 알아본다. 📌 bind란 bind는 자바스크립트 메소드로 호출되면 함수처럼 호출 가능한 '특수 객체(exotic object)'를 반환한다. 이 객체를 호출하면 this가 참조하는 변수(context)로 고정된 함수가 반환된다. let exFunc = func.bind(context); 📌 사용하기 1. 먼저 객체에 변수와 함수가 존재할 때 객체 내의 함수를 다른 변수에 할당해 실행하면 예상한 대로..
2023.03.08 -
[React] 리액트 포탈 React Portal을 통해 모달 만들기
해당 내용은 Udemy | React 완벽 가이드 with Redux, Next.js, TypeScript 강의에서 일부 발췌하였습니다. 가독성을 위해 일부 코드삭제가 있어 그대로 따라하면 문제가 생길 수 있습니다. 📌 들어가며 유데미 리액트 강의를 들으면서 Portal 사용법을 익혀두면 좋을 것 같다고 생각해서 별도로 작성한다. 유데미 강의는 별도로 필기를 하면서 듣고 있는데, 포탈 강의때는 쉽네 하고 넘겼다가 혼자서 못하겠어서 다시 한 번 복습 겸 정리! 📌 리액트 포탈이란 Portal은 JSX를 새 창이 아니라 화면 최상단으로 띄워야 할 때, 리액트가 렌더링되는 div#root 내부가 아닌 그 위로 렌더링 할 수 있게 해주는 방법이다. 보통 우리가 흔하게 아는 모달, 그러니까 정보를 가진 JSX를 ..
2023.03.05 -
[React] npm 대신 yarn으로 create-react-app 시작하기
yarn 으로 create-react-app이 익숙하지 않아서 터미널 명령어 복습 겸 기록! ♪(´▽`) yarn으로 create-react-app 설치하기 1. yarn 이 설치되지 않은 경우 yarn 을 npm을 통해 설치한다. (-g는 글로벌 global이란 뜻으로 붙이면 로컬 전역에 설치한다) npm install -g yarn * 만약 npm도 설치되어 있지 않다면 별도로 설치해야함! node 설치 바로가기 2. 터미널을 열어 아래 명령어를 입력하여 create-react-app을 yarn으로 설치한다. yarn create react-app 새폴더명 * npm은 npx install create-react-app을 입력하면 되지만 yarn은 create를 명령어로 사용해서 설치한다는 점을 기억..
2023.02.26 -
[React] Udemy 강의 노트 10-2
useReducer & useEffect - 입력은 전체 폼의 일부이다. - 코드가 너무 일찍 실행된 경우에는 useEffect는 state 업데이트 후에만 실행됐었다. - 의존성은 state 전체이지 유효성이 아니다. - 객체의 특정 속성을 추출하는 객체 디스트럭처링을 이용할 수 있다. - const { isValid: emailIsValid } = emailState; 로 emailState의 isValid state를 emailIsVaild라는 상수로 별칭할당을 할 수 있다. 중첩 속성을 useEffect에 종속성으로 추가하기 - useEffect()에 객체 속성을 종속성으로 추가하기 위해 distructuring을 사용 const { someProperty } = someObject; useEff..
2023.02.09