본문 바로가기

분류 전체보기

 (200)
🏄‍♀️ 리심스 2주차 - 리액트 렌더링 리액트의 렌더링 프로세스리액트의 렌더링은 브라우저에 필요한 DOM 트리를 만드는 과정을 의미한다. 리엑트는 이 렌더링 작업을 위한 자체적인 렌더링 프로세스가 있다.1. 렌더링 트리거컴포넌트의 렌더링이 일어나는 이유1. 초기렌더링 - createRoot의 실행- 대상 DOM 노드와 함께 createRoot를 호출한 다음 해당 컴포넌트로 render 메소드 호출 2. 리렌더링 - 상태 업데이트- 렌더링된 이후 set함수를 통해 state를 변화시켜 추가적인 렌더링을 유발- props가 변경되는 경우- 컴포넌트의 Key props가 변경되는 경우컴포넌트의 상태를 업데이트하면 자동으로 렌더링 대기열에 추가state update -> triggers -> render 2. Render와 Commit (Rende..
[Week 2] 리액트 렌더링 프로세스, React fiber 1. 리액트 렌더링 프로세스렌더링 프로세스 리액트의 렌더링 과정은 두 가지 단계로 나뉜다.1. Render phase렌더 단계에는 구성 요소를 렌더링하고 변경 사항을 계산하는 모든 작업이 포함된다.실제 DOM을 조작하지 않고 실제 DOM을 모방한 가상의 DOM을 생성한다.이를 통해 리액트는 새로운 가상 DOM과 원래의 DOM를 비교하여 효율적인 렌더링을 수행한다.2. Commit phase커밋 단계에서는 변경 사항이 실제 DOM에 적용된다.리액트는 현재와 이전 가상 DOM 트리 간의 차이를 기반으로 UI를 업데이트한다. 컴포넌트 업데이트 및 리렌더링1단계: 렌더링 트리거컴포넌트는 다음과 같은 상황에서 렌더링이 발생한다.- 컴포넌트의 초기 렌더링사용자가 처음 어플리케이션에 진입했을때 보여야 할 화면을 위해..
[2주차 스타일링 라이브러리 🎨] Vanilla Extract, 그리고 ... 안녕하세요 웹 YB 강민하입니다 ^^ 2주차 스타일링 라이브러리 아티클 첨부합니다.블로그에 긴 글을 작성하는게 익숙치 않아서... 노션 링크 남겨요 !! 원래 Styled-Components, Vanilla Extract 담당했는데Styled-Components는 Emotion과 매우 유사하기도 하고, 잘 안쓰이는 추세이기도하고 ... 세미나때 다루기도 했고 .... 그래서 Vanilla Extract, 그리고 CSS의 역사에 대해서 아티클 작성했습니다.어떤 라이브러리가 왜 생겼는지를 알고있는 것이야 말로 트렌드에 민감한 웹FE 시장에서 웨비들이 갖춰야할 중요한 덕목이라고 생각했기에 지루하더라도 이해 부탁드립니다... https://inexpensive-tugboat-abb.notion.site/with..
[2주차 스타일링 라이브러리 🎨] Emotion / Tailwind CSS 안녕하세요 ~ 웹 YB 김가현입니다2주차 스타일링 라이브러리 관련하여 아티클을 작성하였는데요, Emotion / Tailwind CSS 두 가지에 대해 정리해보았습니다.티스토리가 약간 불편한 부분이 있어서 (자꾸 로그인이 풀려요 🥹 자동저장 된 줄 알았는데 재로그인 하고 불러오니 아까 쓴 부분이 없어져있는 😇) 노션에 작성 후 링크 업로드합니다  https://toothsome-coaster-0a4.notion.site/13128dd31db0803990cadede6956994c?pvs=4 스타일링 라이브러리 (공개) | Notion스타일링 라이브러리 ?toothsome-coaster-0a4.notion.site
state 변경에 따른 리렌더링, useEffect, setTimeout 이해하기 안녕하세요 35기 웹파트 OB 공준혁입니다. (수정하려다가 잘못 삭제해버려서 다시 올립니다 ㅜ) 안녕하세요, 오늘은 react의 가장 기본적인 제공 기능 중 하나인 리렌더링에 대해 이해해봅시다.리렌더링을 제대로 이해하지 못하면, 예상치 못한 난관들을 많이 마주하게 됩니다. 예를 들어, 카드 게임 혹은 Flash Clicker(빠르게 순서대로 버튼을 누르는 게임) 라는 게임을 만든다고 가정해봅시다.  targetNumber인 다음 숫자에 해당하는 숫자를 키패드에서 찾아 빠르게 누르면 되는 기록 성취 게임입니다. 1) 숫자 1을 클릭하면 헤더의 오른쪽 부분에 있는 00:00 으로 포맷팅되어 있는 시간(초 단위)가 올라가고, 2) 동시에 '다음 숫자 : 1' 은 '다음 숫자 : 2' 로 변합니다. 3) 동시에..
[week2] 리액트의 트리구조 안녕하세요! YB 이윤지 입니다 :)이번 주차 스터디 범위가 순수 컴포넌트, 트리, 조건부 랜더링과 리스트 랜더링이었는데요.이 중에서 저에게 가장 생소했던 트리 구조 위주로 이번 주차 아티클을 작성해보려고 합니다! *이 아티클은 리액트 공식문서를 바탕으로 작성되었습니다. React 앱은 서로 중첩된 많은 "컴포넌트" 로 구성되어 있단 것, 이제 다들 아실텐데요.ㅎㅎ 트리로서의 UI 트리는 요소와 UI 사이의 관계 모델이며 UI는 종종 트리 구조를 사용하여 표현됩니다.  예를 들어, 브라우저는 HTML(DOM)과 CSS 를 모델링 하기 위해 트리 구조를 사용하고, 모바일 플랫폼도 뷰 계층 구조를 나타내는 데 트리를 사용합니다. 그렇다면 트리는 왜 사용할까요?트리는 React 앱에서 데이터가 흐르는 방식과 ..
[week2] 컴포넌트의 순수성 안녕하세요! 웹파트 OB 박채연입니다! 😇나리스 2주차 아티클 주제로 순수 컴포넌트, 조건부 렌더링, 리스트 렌더링 등이 있었는데요.이번주차 아티클에서 저는 ‘컴포넌트의 순수성’을 주제로 아티클을 작성해보고자 합니다.컴포넌트의 순수성 ..? 이란 말을 처음 들었을 때, 대체 무슨 말인지 갈피도 잡히지 않았었는데요 ..그래서 이번주차 아티클을 작성하면서 순수 함수는 무엇이고, 리액트는 왜 순수해야 하는 건지 공부해보고자 합니다!그럼 바로 가볼까요 💨 순수 함수 외부 상태에 의존하지 않고, 외부 상태를 변경하지 않으며, 같은 입력에 대해 항상 같은 출력을 반환하는 함수를 말합니다.순수함수의 조건에 대해 정리해보면, 다음과 같습니다. 1️⃣ 함수가 호출되기 전에 존재했던 어떤 객체나 변수는 변경되지 않는다..
[week 2] - 조건부 렌더링, 리스트 렌더링, 컴포넌트를 순수하게 유지하기, 트리로서의 UI 안녕하세요 웹파트 YB 김가현입니다 !2주차에는 조건부 렌더링, 리스트 렌더링, 컴포넌트를 순수하게 유지하기, 트리로서의 UI 이렇게 총 네 개의 챕터를 읽고 공부해봤는데요,공식 문서를 기반으로 내용을 정리해보았습니다 😋  조건부 렌더링조건에 따라 다른 항목을 표시해아할 때if문, && 및 ? : 연산자와 같은 자바스크립트 문법을 사용하여 조건부로 JSX를 렌더링할 수 있음If-else 문if (isPacked) { return {name} ✅;}return {name}; 코드가 길어지는 경향이 있어 가독성이 다소 떨어질 수 있다 &&return ( {name} {isPacked && '✅'} ); && 앞에 있는 조건이 참이라면 뒤의 표현식을 렌더링조건부 렌더링에 &&를 쓰지 말라고 ? ..

티스토리툴바