FrontEngineer JungBam

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..

useRef로 작업하는 것이 state로도 작업하는 것과 어떤 것이 다를까? 리렌더링(클라이언트의 작업과 동기화) state로 작업을 하게 되면 리액트가 액션에 대한 관리를 하게 된다. 즉 이말은 setState를 통한 변화가 있을 때마다 리렌더링하는 과정을 거친다는 말이다. 검색창의 검색단어 자동완성 기능이나 input에 글을 작성할 때 그 글을 토대로 검색결과를 가져오는 것은 state를 이용하면 쉽게 구현할 수 있는 기능이다. 그렇다면 useRef는 완전 쓸모없는 기능일까? 반대로 리렌더링하지 않고 DOM요소의 속성을 조회하거나 수정할때에는 오히려 useRef가 유용할 수도 있다. 예를 들어 게시글의 항목의 key값을 useRef를 통해 지정하고 이를 1씩 증가하면서 key값을 제공할 수도 있고 간..

1. 왜 리액트 훅이 나왔나? ☞ 클래스형 컴포넌트의 복잡한 코드와 더딘 성능에도 어쩔 수 없이 이용할 수 밖에 없었던 부분을 해결하기 위해서 등장 ※ 바벨 사이트를 통한 코드 비교시 확연한 차이를 볼 수 있음.(https://babeljs.io/) 2. 원래 클래스형 컴포넌트에서만 사용되었던 부분이었던 리액트 생명주기에 대한 관리를 할 수 있게 된 것. ☞ 마운트과정(컴포넌트가 호출될 때)에서 데이터를 가져오고 API도 호출할 수 있게 됨. → useEffect 훅 : 기존 클래스형 컴포넌트에서 componentDidMount() //마운트 시// componentDidUpdate()//어떤 값이 업데이트 될 때에//componentWillUnmount()//언마운트 시//를 하나로 해결하도록 만든 것..

useEffect 훅을 이용한 마운트 관리 - 마운트(처음 렌더링 되었을 때), 언마운트(사라질 때), 업데이트 되었을 때 특정 작업을 처리하기 위하여 사용한다. useEffect 훅 생김새 : 첫번째 인자로 함수를 받고 두번째 인자로는 의존성 배열(deps)를 갖는다. useEffect(() => { 마운트 시 작업 return 언마운트 시 작업 }, []) 이 의존성 배열은 간단하게 설명하면 의존성 배열이 비워져 있으면 컴포넌트가 처음 렌더링 될때에만 useEffect 내부 함수가 동작하고 의존성 배열안에 있는 값이 늘어날 수록 안에 들어간 값이 바뀔 때마다 호출된다. deps 안에 특정 값이 있다면 언마운트 시, 값이 바뀌기 직전에도 호출된다.(console을 찍었을 때 잠깐 잠깐 값들이 undef..

모달, 사이드 드로우, 다이어로그와 같은 오버레이 관련 컴포넌트를 만들어 사용할 때 유용함. 오버레이되는 컴포넌트의 최종 HTML 위치가 root가 아닌 의도하지 않은 매우 깊숙한 곳에 위치하지 않도록 해당 오버레이가 생성되었을 때에 직관적으로 볼 수 있도록 도와주는 장치. 준비과정 1. 해당 컴포넌트 파일에 리액트 돔 임포트 import ReactDOM from 'react-dom' 2. 포털 될 실제 렌더링 되는 DOM이 되는 html파일에 포탈을 탈 위치 그려주기. 3. 포털로 이동시킬 컴포넌트 분리하기 const Backdrop = (props) => { return } ※ 같은 파일 내에 컴포넌트를 추가생성했다. 4. 리액트 포털 메소드를 사용하여 보내주기. {ReactDOM.createPort..

안녕 Wrapper라는 유틸 컴포넌트를 통해 props.children으로 해당 값을 그대로 넘기도록 구현.