반응형

react 6

[리액트] 스터디 (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가 바뀌지 않았는데, 무한 렌더링이 발생한다. 이 이슈를 찾는데 사수님께서 알려주셨다..

[리액트를 다루는 기술] ~71p (2-4-6 리액트 & JSX) // 한달만에 독파하기

📚📚리다기 한달만에 독파하기 스타뜨!!!!! 1. 리액트 시작 - 리액트는 V(view)만 신경 쓰는 라이브러리 - render() 함수는 뷰가 어떻게 생겼는지, 작동하는지에 대한 객체를 반환한다. 렌더링 작업이 끝나면 가지고 있는 정보로 HTML 마크업을 만들어서 DOM 요소에 주입한다. - DOM은 Document Object Model의 약어이다. 객체로 문서 구조를 표현하는 방법으로 XML과 HTML로 작성한다. Tree 형태라 특정 노드를 찾고, 수정하고, 제거, 추가 할 수 있다. - DOM 자체는 빠르지만 매 업데이트마다 돔에 접근하여 변화를 주면 성능이슈 발생. 리액트는 가상돔을 두고 변화된 것만 감지하여 실제 돔을 변경하여 성능을 개선했다. 즉 리액트는 페이스북이 리액트를 만든 이유인 "..

책책책book 2021.09.18

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

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

[리액트] 가상 돔(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파일 전체를 다시 리랜더링..