본문 바로가기
  • 삽질하는 자의 블로그
5. Context 다뤄보기 - 기본편 Context 를 사용해보자 Context : 앱 전반에 걸쳐 같은 데이터를 공유하게 만들어 주는 HOOK Context 의 기본 구성 요소 "1) createContext" : createContext는, context 를 만들어주는 react의 빌트인 메서드이다. [const myContext = createContext(defaultValue)] * defaultValue는, "자동완성" 을 위해 사용한다고 해도 무방하다. Provider 를 통해, "아무값도 넘기지 않으면", defaultValue 가 사용된다. "2) context.Provider" : Conetext.Provider 는, "context 를 구독하는 컴포넌트"들에게, "context 의 변화를 알린다". [myContext.P.. 2022. 12. 8.
4. useReducer 바로 알기 - 기본편 useReducer 는, 강력한 State 관리 도구이다. useState 에 비해, 조금 복잡하지만, 많은 state의 변화를 가져오는 action (실행 함수) 을 한군데 모아, 가독성 있게 State 를 관리 할 수 있다. 또한, 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. useReducer는, 크게 두가지 파트가 있다. 리듀서 함수, 그리고 리듀서함수를 dispatch 하여 사용하기 1. 리듀서함수 리듀서 함수는, type 이라는 action의 이름을 이용하여, 각 type 에 맞는, action을 취하게 한다. 리듀서 함수의 반환값 (쉽게 말하면, 각각의 type에 맞는 action이 일어난 후 return 값) 은, 새로운 상태 를 반환한다. * 리듀서함수는 컴포넌트 함수.. 2022. 12. 8.
3. useEffect 바로알기 with. 클린업 프로세스, 디바운싱 useEffect의 사용 useEffect는, 사이드이펙트를 막는데 아주 유용하다. 기본사용 : useEffect( ( ) => { 실행함수 } , [ 종속성 ] ) useEffect의 기본적인 사용법 1. 시작할때 한번만 : 종속성에 state를 넣는다. 2. 무언가 변할때마다 : 종속성에 변하는것(state)를 넣는다. 종속성에는 여러 state 를 넣을 수도 있다, [name, password, id ...] 초기에 한번 실행되고, 이후, 종속성 값이 변할때마다 실행된다. 3. 클린업 프로세스를 이용한다 useEffect 를 사용할때, "반환하는 함수"를 만들 수 있다.(화살표 함수도, 선언문 함수도 괜찮다.) 이 함수를 "클린업 함수" 라고 부른다. [클린업 함수의 실행 타이밍] 1. 클린업 함수.. 2022. 12. 8.
2. React Portal 사용해보기 1) 기존의 Modal 1. 모달을 만든다. 2. 사용할 곳에서, modal 을 띄우거나, 제거하는 함수를 만든다. 3. 모달 컴포넌트로 함수 포인터를 넘겨, 그곳에서도, 띄우거나, 제거할 수 있게 만든다. ============================================= import { useState } from "react"; import Modal from "./components/UI/Modal"; export default function App() { const [modal, setModal] = useState(false); function toggleModal() { setModal((prev) => !prev); } return ( 모달 띄우기.. 2022. 12. 7.
1. State 끌어올리기(상향식 컴포넌트 데이터 이동) React에서 아주아주 중요한 State 끌어올리기를 배워봅시다.(아직 Redux 배우는중이라...) [원리] 부모로부터 온, 함수의 포인터를, 자식이 실행시킨다. 함수의 실질적인 실행은 부모에서 실행된다. 자식은, 값들을 함께 넣고 실행시켜, 부모가 그 값을 받을 수 있다. [단점] 무진장 많은 Props Drilling 이 발생 할 수 있다. 복잡성은 사실 중요한 일이라서, 이게 가장 큰 단점이 될 수 있다. [코드] function onSaveYearValue(e) { setValue(e.target.value); } console.log(value); return ( ); } export default NewExpense; function ExpenseSelector(props) { const {.. 2022. 12. 7.

티스토리툴바