본문 바로가기

리액트

 (7)
🏄‍♀️ 리심스 3주차 - 리액트 렌더링 최적화 리액트는 성능 최적화를 위한 다양한 기능과 도구를 제공한다. 성능 최적화는 곧 불필요한 렌더링을 최소화하는 것으로, 이번 아티클에서는 렌더링 횟수를 줄이고 불필요한 메모리 사용을 줄이는 것에 초점을 맞추어 어떻게 애플리케이션의 성능을 높일 수 있는지 알아볼 것이다.  시작 전에, 먼저 리액트에서 리렌더링이 일어나는 조건은 아래와 같다.해당 컴포넌트의 state가 변경될 때해당 컴포넌트가 받는 props의 값이 변경되었을 때해당 컴포넌트의 부모 컴포넌트가 리렌더링되었을 때 1. Automatic batching (setState의 비동기 동작)💡 batching이란?React가 더 나은 성능을 위해 여러 개의 state 업데이트를 하나의 리렌더링 (re-render)로 묶는 것React 개발자는 성능 최..
🏄‍♀️ 리심스 2주차 - 리액트 렌더링 리액트의 렌더링 프로세스리액트의 렌더링은 브라우저에 필요한 DOM 트리를 만드는 과정을 의미한다. 리엑트는 이 렌더링 작업을 위한 자체적인 렌더링 프로세스가 있다.1. 렌더링 트리거컴포넌트의 렌더링이 일어나는 이유1. 초기렌더링 - createRoot의 실행- 대상 DOM 노드와 함께 createRoot를 호출한 다음 해당 컴포넌트로 render 메소드 호출 2. 리렌더링 - 상태 업데이트- 렌더링된 이후 set함수를 통해 state를 변화시켜 추가적인 렌더링을 유발- props가 변경되는 경우- 컴포넌트의 Key props가 변경되는 경우컴포넌트의 상태를 업데이트하면 자동으로 렌더링 대기열에 추가state update -> triggers -> render 2. Render와 Commit (Rende..
컴포넌트 순수하게 유지하기 컴포넌트를 엄격하게 순수함수로 작성하면 예상밖의 동작이나 당황케하는 버그를 피할 수 있다. 💡 순수성: 공식으로서의 컴포넌트순수함수의 특징함수 밖 객체나 변수를 변경하지 않음같은 입력엔 항상 같은 결과를 반환함React는 작성되는 모든 컴포넌트가 순수 함수일 거라 가정하고 설계되었다.=>React 컴포넌트에 같은 입력이 주어지면 같은 JSX를 반환 💡 사이드 이펙트: 의도하지 않은 결과React의 렌더링 과정은 항상 순수해야 한다. 컴포넌트는 렌더링하기 전에 존재했던 객체나 변수들을 변경하지 말아야 한다.ex)let guest = 0;function Cup() { // 나쁜 지점: 이미 존재했던 변수를 변경하고 있다! guest = guest + 1; return Tea cup for guest..
리액트가 처음인 당신께... 안녕하세요 웹파트 OB 손지유입니다.리액트 공부 4일차... 오늘은, 리액트가 처음인 저를 위한 아티클을 써보려고 합니다!혹시 저처럼 리액트가 처음이신 분들이 있다면 도움이 되길 바라며...그럼, 우리 함께 공부해봐요╰(*°▽°*)╯[목차]STEP1 : 리액트란 무엇인가? 기초 필수 개념 뿌시기!1. 리액트는 무엇일까?2. 리액트를 왜 쓸까?3. 리액트를 쓰려면 알아야 하는 것들4. 리액트의 특징 STEP2: 리액트의 핵심! 중요한 개념 맛보기~1. 컴포넌트 간 데이터 전달 (Props)2. 리액트 훅(Hooks)3. 리액트 컴포넌트 라이프사이클4. 리액트의 "키(Key)" 개념 STEP3: 리액트 파고들기...! 심화 개념을 쉽게 이해해 보자 :)1. 리덕스(Redux) / Context API 심화:..
🏄‍♀️리심스 1주차 - 리액트 상태, 리렌더링 안녕하세요, 리심스 1주차 아티클 작성하러 온 김한서입니다. 💥 Virtual DOM리액트에서는 렌더링시 가상 DOM을 이용한다. 가상 DOM이란, 실제 DOM을 조작하는 방식이 아닌, 실제 DOM을 모방한 가상의 DOM을 구성해 원래 DOM과 비교하여 달라진 부분을 리렌더링하는 방식으로 작동한다. 이 때 가상 DOM을 잘 이해해야만 리액트의 상태에 대해 잘 이해하고 다룰 수 있다.더보기DOM(Document Object Model) 이란? 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다.밑의 그림처럼, HTML과 스크립팅언어(Javascript)를 서로 이어주는 역할을 한다고 할 수 있다.지난 2주차 과제에서 모두 경험해봤듯이, 자바스크립트..
[week 1] 리액트 공식문서 - UI표현하기(첫번째 컴포넌트, 컴포넌트 import 및 export하기, JSX로 마크업 작성하기, 중괄호에 있는 JSX안에서 자바스크립트 사용하기, 컴포넌트에 props 전달하기) 안녕하세요! 웹파트 OB 김건휘입니다. 이번 시간에는 리액트 공식문서 - UI표현하기(첫번째 컴포넌트, 컴포넌트 import 및 export하기, JSX로 마크업 작성하기, 중괄호에 있는 JSX안에서 자바스크립트 사용하기, 컴포넌트에 props 전달하기)를 읽고 정리한 내용에 대한 아티클을 작성해보겠습니다.🌐컴포넌트란?컴포넌트는 리액트 앱을 구성하는 기본 단위로, 재사용 가능한 UI 조각을 말한다. 이 컴포넌트들은 각각 자체적인 렌더링 로직과 상태 관리를 가지며, 복잡한 UI를 구성하기 위해 서로 조합하고 재사용할 수 있습니다. 다음 사진과 같이 컴포넌트들를 조합하여 화면을 구성할 수 있다. 컴포넌트를 한 번 정의한 다음 원하는 곳에서 원하는 만큼 여러 번 사용할 수 있다는 점이 바로 React의 킥이..
[week 1]- function Component ? class Component? 안녕하세요! YB 이윤지라고 합니다.리액트 첫 스터디인 만큼 무엇에 관한 주제로 아티클과 발표를 다뤄볼까 고민도 많이 했는데요!역시 리액트하면 떠오르는 건 컴포넌트 재사용성! 이 가장 많이들 떠오르실 거라고 생각합니다. ㅎㅎ아닌...아닌가? 그렇다고 해주세요. React Component 는 개념적으로는 JS 함수랑 비슷합니다.함수가 입력을 받아 출력을 return 하는 것처럼 React Component도 입력을 받아서 정해진 출력을 리턴하기 때문이죠.하지만 일반적인 JS 함수와는 조금 다른데요, JS의 입력과 출력이 말 그대로 '입력' 과 '출력' 이라면React Component 에서의 입력은 React Element 가 됩니다.바로 이렇게!   React Component 는 말 그대로,만들고자 ..

티스토리툴바