FrontEngineer JungBam

import React from 'react' const context = createContext({ isLoggedIn : false, isLogout : ()=>{} }) export default context createContext를 할 때에 매개변수로 주는 값들은 context 사용간 자동완성 기능으로 불러올 수 있게된다. 위의 코드에서 isLoggedIn과 isLogout은 자동완성기능으로 작성할 수 있게 되는 것. 이 코드들은 자동완성 기능을 주는 목적이기 때문에 더미로 작성하면 된다.(like 위) * 추가로 로그인 인증에 대한 부분을 프로젝트의 거의 모든 페이지에서 사용하기 때문에 이러한 점을 고려했을 때에는 로그인 인증에 대한 기능들은 context로 처리하는 것도 좋아보인다.

key는 리액트가 렌더링간 참조하는 값이기 때문에 고유 식별자로 주는 것. 이 key를 index로 처리했을 때에는 렌더링에 문제가 발생할 가능성이 있기 때문에 index를 이용한 고유 식별자 key를 만들어서 주면 좋다. `what ${index}`

리액트의 렌더링에 대해 진짜 깊게 공부하게 된 한주. 구현만을 고민했던 지난주까지의 나와는 다르게 이제 상태관리와 렌더링도 볼 줄 알게 되었다. 한달간 리액트를 쓸 일이 없었는데 이건 뭐 왜이렇게 재미가 있는지.. 계속 이것 저것 만들다가 3일이 갔다. ES6문법은 let, const부터 모듈시스템, 화살표 함수, 그리고 객체분할까지 뭐하나 리액트를 하면서 중요하지 않은게 없는 개념들이다. ES6문법에 좀 더 익숙해지고 더해서 모듈시스템을 조금 더 이해할 필요는 있을 것 같다. 지난 부트캠프간 그냥 손 코딩으로 따라 쓰던 코딩들이 이제는 왜 이걸써야할까? 이 훅을 여기에 쓰면 이렇게 작동하겠지? 라는 생각들을 하니까 조금 더 리액트에 들어가서 코딩하게 되었다. 한번 키보드 치기 시작하면 3시간이고 4시간..

전역에서 관리해야 하는 데이터를 props로 넘기지 않고도 전달할 수 있는 리액트 훅 (prop Driling을 하면서 발생하는 불필요한 전달과정을 생략할 수 있음.) context 만들기 import { createContext } from 'react' export const HandlerContext = createContext(null) context API의 createContext 를 통해 context를 만들어주고 이 context의 provider로 해당 컴퍼넌트 전역에 값이나 변수를 전달해주는 것이다. 이 context에 저장된 값들은 결국 하위 컴포넌트에서 사용을 하겠다고 신청을 해야하는데 그것이 바로 useContext 훅이다. 사용신청을 위한 훅은 간단하다. 객체분할을 통해 cont..

항해 1주차 과제를 마치고 소름이 돋았다.. 리액트를 지난 두달간 했음에도 렌더링을 이제서야 깨닫다니.. 스냅샷에 대한 이해가 전혀 없었다. state를 스냅샷이라고 설명이 많았음에도 그 스냅샷을 그냥 그 순간을 포착하는 캡처 기능처럼 순간의 데이터를 저장하고 있다라는 개념만 갖고 있었다라나.. 이 state에 의한 렌더링의 이해가 필요하다는 생각에 희열을 느꼈다 진짜로. 그럼에도 useEffect과 의존성 배열은 확실히 이해가 되어있다는 걸 느껴서 다행이다고 생각이 들더라. 내가 작성한 코드 const [workingArray, setWorkingArray] = useState([]) const [doArray, setDoArray] = useState([]) const [doneArray, setDo..

useState와 같이 상태관리를 하는 훅인 useReducer, 어떤 점에서 차이가 있는지 알아보자. 먼저, useReducer의 동작원리를 알아보자. useReducer를 이해하기 위해 reducer 함수와 disPatch, action, state의 관계를 알아야 된다. 1. const [state, disPatch] = useReducer(reducer함수, 초기값)으로 선언된다. 2. const reducer = (state,action)=>{ switch(action.type){ case '1의 경우' : return 1의 경우의 결과값 case '2의 경우' : return 2의 경우의 결과값 default : return 기본으로 주는 결과값 } } 이런식으로 스위치문을 통해 acrion의..

디바운싱이란? - 연이어 호출되는 함수들 중 마지막 함수만 호출하도록 하는 작업 useEffect(() => { // useEffect가 작동할때마다 타이머가 최신화되어 마지막 작업 이후 타이머만이 작동하게 됨. const timersName = setTimeout(() => { setFormIsValid( enteredEmail.includes('@') && enteredPassword.trim().length > 6, ) // 디바운싱 }, 500) return () => { clearTimeout(timersName) } // 클린업 함수 }, [enteredEmail, enteredPassword]) return 을 통한 디바운싱 구현 - setTimeout을 통해 이벤트가 발생하는 것을 retu..

const [isLoggedIn, setIsLoggedIn] = useState(false) useEffect(() => { const storedUserLoggedInInformation = localStorage.getItem('isLoggedIn') if (storedUserLoggedInInformation === '1') { setIsLoggedIn(true) } }, []) useEffect로 로컬스토리지에서 가져온 값을 통해 로그인 인증을 하는 방법 useEffect 내부에서 작업하지 않고 컴포넌트 함수에서 작업을 한다면 내부적으로 로컬스토리지에서 isLoggedIn을 확인하고 setState에 의해서 다시 컴포넌트가 호출되고 다시 로컬스토리지에서 isLoggedin을 확인하고 setStat..