반응형

개발공부/리액트 18

[리액트] 스터디 (git 포함)

✨ useEffect dependency에 state로 인한 무한 렌더링을 야기하는 경우*(코드) - 무한루프에 빠지는 경우를 먼저 알아야할 것 같다. 1) 의존성 배열이 없을 경우 2) 의존성 배열이 있으나, useEffect 함수 내에서 의존성 배열 내의 값을 수정하고 있는 경우 3) 의존성 배열이 있으나, useEffect내에서 state의 변경을 야기하는 경우 const obj = { name: "amy", age:28 } const [myInfo, setMyInfo] = useState({...obj}); useEffect(()=>{ setMyInfo({...myInfo, age:22}); },[obj]) obj가 바뀌지 않았는데, 무한 렌더링이 발생한다. 이 이슈를 찾는데 사수님께서 알려주셨다..

[리액트] HOC 고차 컴포넌트

1. 고차 컴포넌트란? (Higher-Order Components) 고차 컴포넌트는 컴포넌트를 취하여 새로운 컴포넌트를 반환하는 함수입니다. 즉 리액트 컴포넌트를 인자로 받아서 새로운 리액트 컴포넌트를 리턴하는 함수 (●'◡'●) 컴포넌트 로직을 재사용하기 위한 아주 고오급 리액트 기술입니다 const HOC = ReactComponent => EnhancedReactComponent; 여기에서 EnhancedReactComponent는 ReactComponent의 props를 변경 한다거나, ReactComponent에 새로운 props를 추가하여 전달한다거나 아예 새로운 컴포넌트를 return 할 수 있다. 2. 네이밍 팁 Container HOC를 제외하고, 보통 HOC를 통해 새로운 prop을 ..

[리액트] 바벨과 웹팩

- 바벨이란? 🍀자바스크립트 컴파일러 바벨은 입력과 출력이 모두 자바스크립트 코드인 컴파일러다. 초기의 바벨은 ES6 코드를 ES5 코드로 변환해 주는 일만 했지만, 현재는 리액트의 JSX 문법, 타입스크립트, 코드 압축, Proposal 까지 처리 🍀 왜 필요할까? 자바스크립트가 실행되는 환경은 웹 브라우저, NodeJS, Deno 등 다양하게 실행되고, 웹 브라우저 또한 각자 다른 자바스크립트 엔진을 통해 코드를 읽는다. 환경 버전에도 JS는 영향을 받는다(특정 버전 이상에만 실행되는 코드, 특정 브라우저에는 실행되지 않는 코드 등 → 인터넷 익스플로러는 프라미스를 이해하지 못한다!!) 🍀 리액트에서는 왜 써야하나? 브라우저에서 JSX문법을 읽을 수 없기 때문에 필요하다! 즉, 모든 실행 환경에서 정..

[리액트] 함수형 컴포넌트 / 클래스형 컴포넌트

리액트에서 컴포넌트를 선언하는 방식은 두가지가 있다. 클래스형 컴포넌트 - 상태를 저장할 수 있고(state사용이 가능함), React Life Cycle Method 를 사용할 수 있다. - React.Component를 상속받기 때문에 리액트에서 제공하는 기능들을 모두 내것처럼 사용할 수 있다. - 함수가 아닌 클래스이기 때문에 return문을 사용하지 않는다. - render() 함수가 필수적으로 있어야 한다.( render() 함수를 사용해서 JSX를 반환) - 임의의 메서드를 정의할 수 있다. - 함수형 컴포넌트가 먼저 나왔기 때문에, 유지보수를 위해 클래스형 컴포넌트를 알아두어야 함 함수형 컴포넌트 - 함수형은 상태를 저장할 수 없다. 기본적으로 함수는 한번 실행되고 나면 메모리 상에서 사라진..

[리액트] Hooks 정리!

리액트 훅? 리액트 훅은 리액트 버전 16.8에 추가되었다. 훅은 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 하는 기능이다. 훅을 통해서 함수형 컴포넌트에서도 컴포넌트 상태값을 관리할 수도, 컴포넌트 생명 주기 함수 또한 이용할 수 있게 된다. 리액트 훅 장점 - 훅을 사용하게 되면 재사용 가능한 로직을 쉽게 만들 수 있다. 훅은 단순한 함수이므로 함수 안에서 또다른 함수를 호출하게 되어 새로운 훅을 만들 수 있기 때문이다. -> 리액트 내장 훅 + 다른 사람들의 커스텀 훅 = 새로운 훅 탄생 - 훅을 사용하면 코드 가독성이 더 좋아진다. 훅을 사용하게 되면 같은 로직은 한곳으로 모아 가독성이 좋다. 하지만 기존의 클래스형 컴포넌트의 생명 주기 메소드는 서로 다른 로직이 하나의 메소..

[리액트] SPA / SSR / CSR 방식

◼ SPA(Single Page Application) - 어플리케이션 생명 주기 중에서 단 한 번만 리소스(HTML, CSS, JavaScript) 를 로딩하고, 그 후에는 데이터를 받아올 때만 서버와 통신 - 단 하나의 HTML 문서로만 돌아가는 웹페이지, 사용자의 요청(request)에 따라 내용이 동적으로 바뀜 즉, 첫 요청시 딱 한 페이지만 불러오고 페이지 이동시 기존 페이지의 내부를 수정해서 보여주는 방식 - 사용자(클라이언트) 관점에서 다시 말하자면, 최초 페이지를 로딩한 시점부터는 페이지 리로딩 없이 필요한 부분만 서버로 부터 받아서 화면을 갱신하는 것 입니다 등장배경 모바일 시대가 도래하면서 모바일 환경에 최적화된 서비스가 필요해졌으나 일반적인 컴퓨터에 비해 성능이 낮은 모바일에 최적화시..

[리액트] 라이프사이클(LifeCycle Method) 함수 & useEffect

정리하다가 다 날아갔다........... 티스토리 부들부들... :-( 한번 더 정리하기 ◼ 라이프 사이클 모든 리액트 컴포넌트에는 라이프 사이클(수명 주기)이 존재. 라이프 사이클은 컴포넌트가 생성되고 소멸될 때까지 일련의 과정을 의미 ◼ 라이프 사이클 함수 총 10가지의 함수가 존재하며, will이 붙은 함수는 어떤 작업을 하기 전에 실행되고, did가 붙은 함수는 작업을 한 후에 실행 ◼ 라이프 사이클 함수를 사용 하는 경우 어떤 작업을 수행할 때 렌더링 할 때 처리해야 하는 경우가 있고 업데이트 전후로 처리해야 하는 경우가 있는데 이럴 경우 라이프 사이클 함수를 이용해서 처리한다! ◼ 마운트 DOM이 생성되고 웹 브라우저상에 나타는 과정 ◼ 업데이트 컴포넌트를 업데이트 하는 경우로 아래와 같은 ..

[리액트] 가상 돔(Virtual DOM)이란?

리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것 ◼ DOM이란? Document Object Model의 약어로, 객체로 문서 구조를 표현하는 방법. XML이나 HTML로 작성한다. 웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용함. DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있다. ◼ DOM의 단점 동적 UI에 최적화되어 있지 않음! DOM 자체는 빠르지만, 웹 브라우저 단에서 DOM에 변화가 일어나면 CSS를 다시 연산하고 레이아웃을 구성하고, 페이지를 리페인트 하는 시간이 허비됨 돔트리가 수정될때 마다 렌더트리가 실시간으로 갱신됨 SPA(Single Page Application)가 대세인 웹앱 같은 경우, 단일 페이..

[리액트] 리덕스의 장점, 단점

◼ 리덕스란? 가장 많이 사용하는 리액트 상태 관리 라이브러리로 자바스크립트 앱에서 상태(state)를 효율적으로 관리할 수 있게 도와주는 도구 입니다. ◼ 리덕스를 왜 쓸까? - 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. - 컴포넌트끼리 똑같은 상태를 공유해야할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태값을 전달하거나 업데이트할 수 있다. - 규모가 큰 경우에는 리덕스를 사용하여 작업하는것이 상태를 체계적으로 관리할 수 있고, 코드의 유지 보수성을 높여주고, 작업 효율을 극대화해준다. - 미들웨어라는 기능을 제공하여 비동기 작업을 효율적으로 관리해줌 ◼ 기본 개념정리 1) 액션 - state를 어떻게 바꿀지 적어놓은 행동 2) 액션 생성 함수 - ..

[리액트] 리액트의 장,단점

* 리액트란? 페이스북에서 제공해주는 프론트엔드 라이브러리, 컴포넌트 기반으로 되어 있어서 컴포넌트에 데이터를 내려주면 개발자가 설계한대로 UI를 만들어 사용자에게 보여진다. * 리액트의 특징? - 단일방향의 데이터 흐름, 데이터 흐름을 단방향으로 제한함으로서 데이터를 추적하기 쉽고 디버깅을 쉽게 해줌 * 리액트의 장점? 1) 헤더, 메인 콘텐츠, 버튼, 사이드바 메뉴 같은 것들을 헤더 컴포넌트, 사이드바 컴포넌트와 같이 하나의 컴포넌트로 묶어서 관리할 수 있다. 따라서 리액트를 개발하다가 특정 부분에서 오류가 생기면 그 컴포넌트만 수정하여 사용할 수 있다. 코드의 재사용성과 유지보수성을 증가시켜 준다. 2) 매번 DOM 전체를 직접 접근하여 변화를 주면 HTML, CSS, JS파일 전체를 다시 리랜더링..