FE개발 공부 시작: 23년 4월 10일

패키지 설치하기 yarn add react-router-dom 사용방법 순서 Router.js에 Route 설정에 관련된 코드를 작성하고, 최상위 컴포넌트인 App.js에서 import 해서 사용한다. 페이지 컴포넌트 작성 Router.js 파일 생성 및 router를 구성하는 설정 코드 작성 (ex: redux 할 때도 설정 파일 만들어서 주입) App.jsx에 Router.js를 import하고 주입 페이지 이동 테스트 프로젝트 구성 App.jsx src/pages/Home.jsx src/pages/About.jsx src/pages/Contact.jsx src/pages/Works.jsx src/shared/Router.js (src/shared/Router.js) import React from ..

1. Action value type이름 컨벤션: module명/type counter/PLUS_ONE action type을 문자열의 형태를 dispatch나 reducer에 직접 넣는것이 아니라 변수 형태로 관리 2. Action Creator action 객체를 디스패치할 때 action value를 직접 입력하지 않고, (예:dispatch({ type: "MINUS_ONE" });) 만들어진 상수를 이용해 Action Creator가 해당 action values를 return하도록 함. action을 만드는 생성자인 셈 (src/redux/modules/counter.js) ⭐: 모듈 만들 때, 만들어야 할 구성요소 리스트업 // ⭐src/redux/modules/counter.js // ⭐A..

1. 모듈 만들기 (src/redux/modules/counter.js) // 초기 상태값(state) const initialState = { number: 0, }; // 리듀서 : state에 변화를 일으키는 함수 // (1) state를 action의 type에 따라 변경하는 함수 // input : state와 action 이 두가지를 받음 // action은 객체 형태로 되어있고 type과 value을 가지고 있음 // state를 어떻게 수정할건지 action에 대해 표현하는게 action 객체 const counter = (state = initialState, action) => { switch (action.type) { default: return state; } }; // 만든 co..

설치 yarn add redux react-redux 프로젝트 구조 설정하기 App.jsx src/redux/config/configStore.js src/redux/modules src/redux 폴더 : redux관련 코드를 모두 몰아넣음 src/redux/config폴더 : 리덕스 설정 관련 파일 전부 src/redux/config/configStore.js파일 : 중앙 state 관리소 -> 설정 코드(.js) src/redux/modules폴더 : state의 그룹! Todolist의 경우 todos.js (src/redux/config/configStore.js) 파일 작성해주기 createStore() 리덕스의 가장 핵심이 되는 스토어를 만드는 메소드(함수). 리덕스는 단일 스토어로 모든 상..

DOM(Document Object Model) 엘리먼트를 tree 형태로 표현한 것 노드 : 트리의 요소 하나하나. 각각의 노드는 해당 노드에 접근과 제어(DOM조작)를 할 수 있는 API를 제공함 form validation에서 DOM 사용 예 function validateForm() { let x = document.forms["myForm"]["fname"].value; if (x == "") { alert("Name must be filled out"); return false; } } Name: 가상DOM(Virtual DOM) 가상DOM은 실제 DOM과 구조가 완벽히 동일한 복사본 형태. 실제 DOM은 아니지만, 객체(object) 형태로 메모리에 저장되기 때문에 실제 DOM을 조작하는 것..

리-렌더링의 발생 조건 컴포넌트에서 state가 바뀌었을 때 컴포넌트가 내려받은 props가 변경되었을 때 부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두 최적화하는 방법 memo(React.memo) : 컴포넌트를 캐싱 useCallback: 함수를 캐싱 useMemo: 값을 캐싱(함수가 리턴하는 값이나 값 자체) 1. memo 컴포넌트를 '메모리'에 저장(캐싱)해두고 필요할 때 갖다 씀. 이렇게 하면 부모 컴포넌트의 state가 변경으로 인해 props가 변경이 일어나지 않는 한 컴포넌트는 리렌더링 되지 않음 하위 컴포넌트를 export하는 부분에서 React.memo()로 감싸줌 export default React.memo(Box1); export default React.memo(Box..

데이터 전달해줄 때 너무 깊어지면 prop driling현상이 일어남 prop가 어떤 컴포넌트로부터 왔는지 파악이 어려워지고, 오류가 나면 대처가 늦어지게 됨 필수 개념 createContext : context 생성 Consumer : context 변화 감지 Provider : context 전달(하위 컴포넌트로) (src/context/FamilyContext.js) import { createContext } from "react"; export const FamilyContext = createContext(null); 나중에 props로 주입하는 하위컴포넌트들에서 사용할 수 있음. return을 해줄 때 해당 컴포넌트를 로 감싸서 내려줌 ... import { FamilyContext } fr..

DOM요소에 접근할 수 있도록 하는 Hook. ref는 레퍼런스reference 참조의미 ⭐ref 값은 컴포넌트가 계속해서 렌더링이 되어도, unmount되기전까지 값을 유지함 사용방법 기본적인 훅이라 import에 추가만 해주면 됨 const ref = useRef('초기값') // 값 가져오기 ref.current // 값 변경하기 ref.current = '변경값' 사용 용도 저장공간으로써 사용이 된다 state와 비슷한 역할을 함. 하지만 ref에 저장한 값은 렌더링을 일으키지 않는다. ref는 리렌더링을 발생시키지 않는 값을 저장할 때 사용 DOM 요소 렌더링 되자마자 특정 input이 focusing되는 경우 DOM 접근해보기 예제 input태그 안에 ref라는 속성이 있음 이 속성에 변수를 ..

(속한 컴포넌트가) 렌더링 될 때, 특정한 작업을 수행해야 할 때 설정하는 Hook 컴포넌트가 화면에 보여졌을 때(mount) 컴포넌트가 화면에서 사라졌을 때(unmount) useEffect(()=>{ ... }) 매개변수로 콜백함수 들어 가는 형태 리렌더링 흐름 input에 값을 입력하면 value, 즉 state가 변경된다. state가 바뀌었기 때문에, App 해당 컴포넌트가 리렌더링 됨 리렌더링이 되었기 때문에 useEffect()가 다시 실행됨 1~4번 순환 의존성 배열(dependency array) 이 배열에 값을 넣으면, 그 값이 바뀔때만 useEffect를 실행한다 함수가 끝나는 뒤에 두번째 배열을 넣어줌 useEffect(()=>{ // 의존성 배열에 값이 없기 때문에 최초에 한번만 ..

가장 기본적인 hook이며, 함수형 컴포넌트 내에서 가변적인 상태를 갖게 함 기본 사용법 const [state, setState] = usestate(초기값); usestate는 배열을 return하고, 이것을 구조분해할당으로 꺼냄. state가 객체 데이터 타입인 경우엔 불변성을 유지해줘야 함 함수형 업데이트 setState((currentNumber)=>{ return ccurrentNumber + 1; }) 수정할 값이 아니라 함수를 넣을 수 있다. 함수의 인자에서 현재 state를 가져올 수 있고, 메인 로직에서는 이 값을 변경하는 로직을 작성할 수 있음 차이점 배치 업데이트: 한꺼번에 변경된 내용들을 모아서 최종적으로 한 번만 실행 함수형 업데이트: 명령을 모아서 '한번씩' 실행시킴 인자에 현..