반응형 리액트7 ESLint 끄는법 리액트를 하다보면 ESLint가 에러가 아닌데 에러가 나도록 표시하는 경우가 있다. 몹시 짜증나므로 ESLint를 끄는방법을 배워보도록 하자 간단하다. .env 파일에서 아래와 같이 추가해준다. DISABLE_ESLINT_PLUGIN=true 2022. 12. 2. 이벤트 버블링과 캡처링 https://www.robinwieruch.de/react-event-bubbling-capturing/ React: Event Bubbling and Capturing Event bubbling in React explained with examples. You will learn how to prevent events from bubbling, how to capture events before the bubbling, and how to access the target and currentTarget ... www.robinwieruch.de 1. 개요 리액트 컴포넌트를 여러개 tree구조로 만들고 각각의 컴포넌트에다가 click 리스너를 달았다고 하자. 그리고 클릭 이벤트를 발생시켰다. 그럼 t.. 2022. 11. 17. 리액트에서 특정페이지 스크롤 막기 useEffect를 이용하여 컴포넌트가 마운트 될 때 스크롤을 막고, 컴포넌트 정리를 할 때 return 값으로 스크롤을 해제해준다. useEffect(() => { document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = 'auto'; } }, []); 2022. 11. 16. 초 간단 Redux 사용법 https://redux.js.org/tutorials/quick-start Quick Start | Redux - How to set up and use Redux Toolkit with React-Redux redux.js.org Redux란? state를 관리해주는 라이브러리 왜씁니까? state를 선언했는데 이를 어디 저 밑에 있는 자식컴포넌트한테 줘서 쓸일이 있다고 칩시다. 그럼 죄다 props 뚫어줘서 state랑 setState함수 넘겨줘야 되는데 끔찍함. 그래서 state를 전역으로 관리하는게 필요할 때 씀 1. 설치 npm install @reduxjs/toolkit react-redux 2. 개념 알아둬야할 개념 세가지가 있음 Store : 말그대로 상태를 저장하는곳 Provider :.. 2022. 11. 8. React Router v6.4 튜토리얼 배우기 https://reactrouter.com/en/main/start/tutorial Tutorial Tutorial Welcome to the tutorial! We'll be building a small, but feature-rich app that let's you keep track of your contacts. We expect it to take between 30-60m if you're following along. 👉 Every time you see this it means you need to do something in t reactrouter.com All images and contents from above link 양이 조금 방대해서, 순서나 내용에 오류가 조금 있을 수 .. 2022. 9. 16. Fragment 사용법 Fragment란? 프래그먼트는 컴포넌트가 여러개의 엘리먼트를 하나로묶어, 하나의 엘리먼트처럼 리턴해주록 하는 기능이다. 컴포넌트는 하나의 엘리먼트를 리턴해야 한다. 물론 그 엘리먼트 안에 여러 자식 엘리먼트들이 있을 수 있다. 그러나 특정한 상황에서 여러개의 엘리먼트를 리턴해주어야 하는 경우가 있다. 아래 예시를 보자 class Table extends React.Component { render() { return ( ); } } 위 예시에서 안에 Columns는 여러개의 를 리턴해야 한다 허나 컴포넌트는 하나의 엘리먼트만 리턴해야 함으로 이를 로 아래처럼 감쌌다고 하자 class Columns extends React.Component { render() { return ( Hello World ).. 2022. 9. 15. useEffect 이해하기 https://reactjs.org/docs/hooks-effect.html Using the Effect Hook – React A JavaScript library for building user interfaces reactjs.org 공식문서 설명이 한글로 거지같아서 영어로 읽고 한번 정리하는 내용임 useEffect는 class Component의 componentDidMount, componentDidUpdate, componentWillUnmount 에 대응되는 개념이다. 많은 케이스에서 componentDidMount와 componentDidUpdate에 똑같은 작업을 동시에 수행하는 경우가 있었다. 이에 페이스북은 useEffect에 두 기능을 한번에 묶어버렸다. 물론 따로 if문으로 두.. 2022. 9. 6. 이전 1 다음 반응형
