치춘짱베리굿나이스

react-portal 부모 컴포턴트의 바깥에 있는 DOM 노드에 자식을 렌더링할 수 있는 기능이다 쉽게 말하면! 리액트에서 모든 컴포넌트는 root에 렌더링이 되는데, react-portal을 이용하면 root 밖에 있는 요소에도 컴포넌트를 렌더링할 수 있다는 것이다 이렇게... modal 태그는 root의 밖에 있음에도 마치 root 안에 있는 것처럼 연결해주는 것이다 마치 게임에 나오는 포탈처럼 말이다 react-portal 써보기 1. index.html 파일의 root 태그 바깥에 요소 끼워넣기 ... 리액트는 root 요소 안에만 요소를 렌더링함을 기억하고, 완전 바깥에 modal 요소를 넣어보자 이렇게 html 파일 안에 요소를 끼워넣으면, 요소가 존재하지 않는 경우가 없으므로 documen..

컴포넌트의 데이터 Fetching & Rendering 크게 세 가지 방법이 있으며, 각각 수행 방법과 시간에 차이가 있다 fetch-on-render (렌더링 직후 불러오기) useEffect(() => { fetchData(); }, []); // Mount될 때 데이터 불러오기 많은 컴포넌트에서 useEffect를 통해 컴포넌트가 마운트되었을 때 데이터를 불러오는 방식을 사용한다 이 방식의 단점은 컴포넌트가 마운트 및 렌더링된 이후에 데이터를 불러오기 시작한다는 점이다 이는 곧 ‘waterfall’ 이라는 문제로 이어진다 const MovieList = () = { const [movieData, setMovieData] = useState(null); // 데이터 초기화 useEffect(() =..

IntersectionObserver 무한스크롤을 구현해야 해서 이전에 합류한 프로젝트 코드를 (모바일 뷰 구현할 때 무한스크롤 방식으로 게시글을 불러왔기 때문) 찾아보고 있었는데, 보편적인 방식은 Intersection Observer를 거는 방법 같다 이름만 들어보면 벌써 공포스러운데 차근차근 정리해보도록 하겠다 Intersection Observer가 뭐지? 한국어로 교차 관찰자 / 탐지자 라고 한다 한국말로 풀어도 어렵다 ㅋㅋ ‘타겟 요소’와 ‘타겟의 상위 요소 또는 최상위 요소의 뷰포트’가 교차되는 부분을 비동기적으로 관찰하는 API라고 한다 뷰포트라 함은 우리가 웹 페이지를 보고 있는 바로 그 화면을 의미하며, css 작업을 할 때 vw, vh 단위로 비교적 익숙할 것이다 쉽게 말하자면 어떤 ..

Custom Hook 코딩을 하다 보면 (당연히도) 반복적인 로직이 굉장히 많이 나오게 된다 예를 들면, 버튼을 눌렀을 때 특정 상태값이 바뀌게 하는 로직, input에 값을 입력하면 상태값이 같이 변하는 로직 등... 매 컴포넌트마다 useState, useEffect를 손수 달아주기보단 훅을 직접 만들어서 필요할 때마다 불러와 사용하면 몇십줄 재선언해야할 게 한두줄이면 끝난다 예시 Axios 코드 axios.get('링크') .then(res => { console.log(res); setState(res.data); }) .catch(e => { console.log(e); }); 어떠한 API에 GET 요청을 보내는 axios 코드가 있다 보통 API에 요청을 보내는 건 컴포넌트가 Mount될 때..

😡 많은 프로젝트에서 나를 괴롭혔던 오류이다 툭하면 발생하는데 브라우저에는 컴포넌트가 하나도 렌더링되지 않고 흰 배경만 덩그러니 남아 있어서 더 킹받았던 오류 발생하는 이유도 제대로 몰랐는데 내 코드 리팩토링하면서 이유를 찾아버려 정리하기로 했따 왜 나를 괴롭히는가? 처음에는 각 태그에서 발생하는 이벤트의 기본 동작이 반복적으로 발생하는 줄 알고 e.preventDefault() 를 일일히 넣어주었고, 실제로도 해결되었다 하지만 e.preventDefault()는 태그나 와 같이 특수한 태그에서 일어나는 기본 동작을 막아주는 용도이지, 애초에 button이나 div는 기본 동작이랄 게 없어서 저걸 쓰나 마나 별반 차이가 없었다 리팩토링을 하고 보니 문제점은 함수 그 자체에 있었다;; ... const [..

CSS Module CSS 클래스명을 겹치지 않게 해주는 웹팩 자체 기능이다 간단하고 작은 토이 프로젝트면 몰라도 프로젝트가 거대해질 수록 클래스명이 겹칠 위험이 매우 커진다 이때 CSS Module을 사용하면, CSS Module가 자체적으로 클래스명을 [파일명]_[클래스명]_[해쉬값] 으로 지정해주기 때문에 클래스명 중복 지정이 되지 않도록 방지해줄 수 있고, 더욱 깔끔한 파일간 연관성을 구성할 수 있다 CSS 파일 생성 .profileDiv { background-color: white; } .buttonDiv { color: white; background-color: teal; } 이러한 CSS 파일 (사실 SCSS도 node-sass 모듈을 설치했다면 가능하다) 이 있다고 가정하자 파일명의 형..

prevState 사용 이유 const [testValue, setTestValue] = useState(false); ... setTestValue(!testValue); 우선 아무 생각 없이 현재 상태값을 그대로 가져와서 이렇게 작성하던 과거의 나를 반성하자 쓰는 법 const [testValue, setTestValue] = useState(false); ... setTestValue((prevState) => !prevState); 간단하다 setState() 함수 내에 인라인 함수를 작성하면 된다 인자로 prevState가 자동으로 들어간다 근데 왜 굳이 써요? const [testValue, setTestValue] = useState(0); const handleOnClick = () => ..