개발세발

Context - 어플리케이션에서 전반적으로 사용할 값을 관리 ex) 사용자의 언어, 로그인 상태, UI 테마 등 환경 설정 Context와 컴포넌트가 연동되면 컴포넌트를 재사용하기 어려움 - 자주 변경되는 상태인 경우, 사용하지 않는 것이 좋음 : Context 내부의 값이 변경되면 Context를 사용하는 모든 자식 컴포넌드들이 리렌더링 됨 App이 가진 값이 G가 사용하고 싶다면 A ➡️ B ➡️ E를 거쳐와야함 (계속 자식 props로 전달) function App() { return ; } function GrandParent({ value }) { return ; } function Parent({ value }) { return ; } function Child({ value }) { ret..

📍ueReducer() : 컴포넌트의 상태를 관리할 때 사용하는 Hooks const [state, dispatch] = useReducer(reducer, initialState); 값 설명 state 컴포넌트에서 사용할 상태 값 dispatch 액션을 발생시키는 함수 reducer reducer 함수 : 개발자가 직접 정의해야 하는 함수 initialState 초기 상태 값 dispatch( { type : value} ) // 액션이 생긴 모양이 객체 function reducer(state(현재 변수의 상태값), action(dispatch의 객체 = 업데이트를 할 정보)) { // 새로운 상태를 만드는 로직 return 새로운 상태; } - 특징 : 컴포넌트 상태 업데이트 로직을 컴포넌트에서 분..

Hooks : 리액트 버전 16.8에 새로 도입된 기능 - 함수형 컴포넌트에서 상태 관리를 할 수 있는 기능 제공 ◼️ 종류 useState useEffect useRef useReducer useMemo useCallback 📍useState() const [state, setState] = useState(초기값); //예시 const [number, setNumber] = useState(3); // number =3 setNumber(6) // number = 6 - 가장 기본적인 Hook - 함수형 컴포넌트가 가변적인 상태를 지닐 수 있도록 해 줌 (*) 실습 1 - 숫자 증감 시키기 Counter.jsx import { useState } from 'react'; const Counter = ..

[노션 기록] [잘한 점] ☑️개념을 제대로 다지며 기초를 탄탄히 - 드디어 리액트를 새롭게 배우기 시작하면서 개념부터 찬찬히 제대로 다지고자 노력했다. 자동완성된다고 끝나는 것이 아니라 자동완성 되는 내용들이 어떤 것들인지, 내가 작성하는 코드만큼은 최대한 다 제대로 알고 넘어가고자 했다. 그 과정에서 강의를 듣는 것만으로는 한계가 있다고 생각하여 기본서를 보기 시작했다. 책으로 프로그래밍 공부하는 것에 좀 부정적이고 잘 되지 않는다고 여겼는데 막상 책을 보면서 공부하니 내가 원하는 부분을 바로 찾을 수 있어서 좋았다. 그리고 강사님께서 말씀해주신것처럼 정제되어 있는 정보를 담고 있는 결과물이기에 블로그나 기타 인터넷에 올라와 있는 정보보다 신뢰도가 높았고 표현또한 명확해서 좋았다. - 그리고 리액트의..