새로움으로 가득한,

꾸준한 사람이 되자😎

Blog/React.js

🤷‍♀️ 프롭스 드릴링 단방향 흐름인 리액트를 사용하는데 발생한 문제점. 코드작성과 수정에 상당한 악영향을 끼침 🤷‍♀️ 어떻게 처리할 것인가? 모든데이터는 자식인 프로바이터(공급자 컨포넌트)에게 모든 데이터를 준다. 프로바이터는 자신의 자손에게 직통으로 데이터 줄수있다(프롭스 드릴링 사라짐) => 깔끔, 가독성 좋아짐 모든 데이터에 접근할 수 있는 컴포넌트들의 영역을 Context(문맥=글의방향)라고 표현 한다. 🤷‍♀️ 이용방법 Context 생성 const MyContext = React.createContext(defaultValue); Context Provider를 통한 데이터 공급 {/*이 Context안에 위치할 자식 컴포넌트들*/} Provider 컴포넌트는 value 프롭스를 받아 안에..

2022. 3. 5.

Blog/React.js

🤷‍♀️ useReducer - 상태관리를 돕는 리액트 훅스 - 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수 - useState 대체 가능 => 상태변화 로직들을 컴포넌트에서 분리하여 컴포넌트를 가볍게 작성할수있다. 🤷‍♀️ 사용방법 const [state, dispatch] = useReducer(reducer, 1); 비구조화 할당을 통해서 사용하며, 0번째 인덱스는 state, 1번째 인덱스는 상태를 변화시키는 액션을 발생시키는 함수를 넣어주면 된다. 또한, useReducer함수 호출시 dispatch가 상태변화를 일으킬때 일어난 상태변화를 처리해주는 reducer 함수를 꼭 전달해줘야 하며, 두번째 인자로 전달하는 값은 state의 초기값이 된다. const red..

2022. 3. 4.

Blog/React.js

목표 - 프로젝트 전체 최적화 작업 나머지 최적화 하기 1개의 게시물을 삭제 했는데 나머지 아이템까지 리렌더링 일어남 => 게시물이 많거나 이미지가 포함될 경우에는 큰 메모리가 낭비 되기 때문에 심각한 문제가 발생! 1. 최적화의 시작은 React.memo로 컴포넌트를 묶어주는것! export default React.memo(DiaryItem); 2. useEffect를 활용해서 어떤 아이템이 리렌더링 되고 있는지 확인 (리프레시 전체 렌더 확인) useEffect(() => { console.log(`${id}번째 아이템 렌더!`); }); 0번 부터 19번의 아이템이 찍히는걸 확인할 수 있다. 3. App 컴포넌트의 onRemove 와 onEdit 최적화 const onRemove = useCall..

2022. 3. 1.

Blog/React.js

목표 - 현재 진행한 코드 중 낭비되고 있는 부분 찾아 최적화 하기 찾는 방법 어떤 컴포넌트가 낭비되고 있는지 크롬 도구로 찾을 수 있다. 이미지와 같이 일기 삭제를 했는데 에디터 전체가 렌더 된것으로 확인된다. 👀 코드를 수정해보자 1. onCreate함수에 React.memo로 묶기 // 아래처럼 직접 묶는건 함수길이가 길어질 경우 햇갈릴 수 있음. const DiaryEditor = React.memo(({onCreate}) => { ~~ // 그럴경우 하단 export default에 묶어주는 방식으로 하기! export default React.memo(DiaryEditor); React.memo로 묶인 DiaryEditor를 내보내는 것 이기 때문에 기존방식과 결과가 동일하다. 2. useEf..

2022. 2. 24.