💎React

리액트 훅 폼 라이브러리를 사용하는데 해당 라이브러리는 비제어 컴포넌트 방식으로 구현되어 있다는 설명이 있었다. 비제어 컴포넌트는 무엇이고, 제어 컴포넌트는 무엇이란 말인가? 오늘은 이것에 대해 공부해보려고 한다. 제어 컴포넌트 리액트 공식문서에 따르면 >제어 컴포넌

state 용도 중요한 데이터는 변수말고 state에 담는다. 생각해보면 변수에 담으나 state에 담으나 그게 그거 같은데 왜 state를 쓰는걸까? state는 변동사항이 생기면 state를 쓰는 html도 자동으로 재렌더링해준다. 그냥 쌩자바스크립트로 변수에 담

는 변경할 항목이 2개니까 망정이지, 100만개였으면 변경될 state 적힌 배열 적느라 내 손목이 먼저 망할 것이다.state는 변경된 부분을 찾아 재렌더링해주는 녀석인데 우리가 커피\[0]='녹차라떼'라고 적는다고 해도 '이전이랑 지금이랑 뭐가 다른건데..?' 갸우

컴포넌트가 표시되고 사라지는 순간까지의 하나의 생명 주기.내 인생도 살기 어려운데 컴포넌트의 인생주기를 알아서 무엇하냐고 묻는다면,이 녀석들의 인생을 알면 그 인생의 중간중간에 간섭할 수 있게 된다!간섭을 한다는 건 각각의 인생주기에 맞춰 우리가 코드를 실행할 수 있게

props >부모 component에서 쓰던 state를 자식에게 전송하는 방법 주의* 부모 -> 자식 컴포넌트간에만 가능 ❌ 자식 -> 부모 불가능 ❌ ❌ 형제끼리 컴포넌트간에도 불가능 ❌ input 에 입력한 값 가져오기 onChange={(e)=>{}} 지금

이제부터 App에 있는 값/변수를 Fist.jsx에 가져오는 여러가지 방법에 대해 알아보고자 한다.1\. 매개변수에 props 자체로 담아 보내기매개변수에 {}에 담아 보내기객체구조분해할당으로 보내버리기

얕은 복사/ 깊은 복사 불변성을 유지하기 위한 방법으로는 object.assign/filter/reduce/map등의 내장 함수를 사용해야 한다. push/ pop 이런거 쓰면 안 된다. 아 이젠 그냥 이해가 안 돼서 그냥 통째로 외우는 게 나을 것 같다...ㅎ 데

리액트 최상위 컴포넌트 App에 하위 컴포넌트들을 여러 개 담고 있다보면, App.css에 적용된 스타일들이 하위 컴포넌트에도 적용되어 스타일이 오염될 수 있다. 이를 방지를 위해 전체 컴포넌트에 공통적으로 적용하기 위한 css, 특정 컴포넌트에만 적용하기 위한 css

useReducer: 상태 관리를 담당하는 HookuseState와 비슷한 개념이나, useState를 통한 상태관리 및 데이터 추가/제거/수정 등의 각종 Handler를 일일히 쓸 필요없이 하나의 함수로 사용할 수 있게 해준다.useReducer에 중요한 3가지 개념

const ref = useRef(value)함수형 컴포넌트에서 useRef를 부르면 {current:value}로 생긴 ref 오브젝트를 반환해준다. useRef의 인자로 들어간 value는 ref 오브젝트의 current 값으로 저장된다. 반환된 ref는 컴포넌트의

특정한 값을 모든 컴포넌트에서 사용할 수 있도록 만들어놓고, 어디서든 특정한 값을 불러와서 사용할 수 있도록 해주는 Hook리액트는 기본적으로 위에서부터 아래로 데이터를 전송해주는 구조로 이루어져있다. 만약 어떤 프로젝트에서 전역적으로 사용하는 데이터(user, the

props drilling 을 피할 수 있고, 어디서든 특정한 데이터를 사용할 수 있는 방법으로 useContext 훅이 있다. 상태관리 도구는 아니고, 그저 상태를 공유할 수 있는 기능이다!(Redux는 상태관리까지 가능)보통 src/context 폴더를 따로 생성하

참고사이트: 프론트엔드 아키텍처: 컴포넌트를 분리하는 기준과 방법 by 이문기

https://yrnana.dev/post/2021-08-21-context-api-redux/