본문 바로가기

분류 전체보기

 (200)
[week2] 순수 컴포넌트, 사이드 이펙트, 트리로서 UI 리액트는 컴포넌트 기반의 UI 라이브러리로, 각 컴포넌트는 더 큰 UI 구조의 일부로 결합된다. 이 아티클에서는 순수 컴포넌트(Pure Component)와 리액트 애플리케이션의 트리 구조로서의 UI를 이해하는 데 초점을 맞춰 보겠습니다.순수 컴포넌트란?순수 컴포넌트는 주어진 props와 state에 따라 항상 동일한 출력(렌더링 결과)을 반환하는 컴포넌트이다. 순수 컴포넌트는 같은 입력값이 주어졌을 때 같은 결과를 제공하기 때문에 불필요한 리렌더링을 방지하여 성능을 최적화할 수 있다. 컴포넌트 순수성을 위반한 컴포넌트 예시let person = 0;function Web() { person = person + 1; return 물결 웹 #{cnt}명;}export default function SOPT..
[week2] 순수 컴포넌트 안녕하세요 웹파트 YB 김다현입니다 😊 이번 2주차에는 조건부 렌더링, 리스트 렌더링, 컴포넌트를 순수하게 유지하기, 트리로서의 UI 이렇게 총 네 개의 챕터를 읽고 공부해봤는데요! 조건부 렌더링과 리스트 렌더링은 나름 빠르게 이해한 반면 순수 컴포넌트는 이해하는 데 조금 시간도 걸렸고, 아직 이해하지 못한 부분도 있는 것 같아 이번 아티클에서 다뤄보며 더 공부해보려고 해요 ⊹꒰⍢⑅ ꒱꙳ (트리 UI도 기회가 된다면 추가를...) 그리고 저는 사실 리액트 개념이 부족해서... 우선 공식문서를 최대한 쉽게 풀어내서 설명하는 거에 초점을 맞춰서 작성해볼게요!❄️ 순수 컴포넌트리액트에서 순수한 컴포넌트라는 건 항상 같은 입력이 들어오면 같은 결과를 보여주는 컴포넌트예요.커피를 만들 때 레시피가 있다면 같은 ..
[week2] - 조건부 렌더링, 리스트 렌더링, 컴포넌트를 순수하게 유지하기, 트리로서의 UI 안녕하세요! 웹 35기 한수정입니다.이번 나리스 2주차 아티클의 주제는 조건부 렌더링, 리스트 렌더링, 컴포넌트를 순수하게 유지하기, 트리로서의 UI입니다. 모든 개념을 아직 완벽히 알고 있진 않아, 하나씩 차근차근 알아보고 정리해보려고 합니다. 조건부 렌더링과 리스트 렌더링은 예시 코드를 중심으로 알아보고 컴포넌트를 순수하게 유지하기와 트리로서의 UI는 공식문서를 중심으로 정리해보겠습니다...😊 나리스 모두 파이팅! 🙌 조건부 렌더링조건부 렌더링(Conditional Rendering)은 특정 조건에 따라 UI 컴포넌트를 화면에 표시하거나 숨기는 방식입니다. React는 if 문, && 및 ?: 연산자와 같은 자바스크립트 문법을 사용하여 조건부로 JSX를 렌더링할 수 있습니다.조건부 렌더링 구현 방..
[React] 리렌더링에 대해 알아보자 리렌더링이 일어나면 UI 를 다시 그려주는 과정을 거친다. 리렌더링이 자주 일어나면 메모리가 소모되고, 비용이 발생되기 때문에우리는 불필요한 리렌더링이 발생하지 않기 위해 최적화 작업을 할 필요가 있다.  리렌더링이 일어나는 조건1. 컴포넌트의 state 가 변경되었을 때2. 컴포넌트가 상속받은 props가 변경되었을 때3. 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 리렌더링   리렌더링 특징형제 관계인 컴포넌트들끼리는 서로 리렌더링에 영향을 미치지 않는다. 형제 컴포넌트끼리는 리렌더링에 영향이 없다. Child1이 리렌더링된다고 Child2가 리렌더링 되지 않으며, Child2가 리렌더링 된다고 Child3이 리렌더링 되지 않는다.Child1, Child2, Child3가 리렌더링되는지 여부는 오로지..
useEffect, 클린업 함수, useLayoutEffect, useRef ❓useEffect란useEffect : React 함수 컴포넌트에서 side effects를 수행하기 위해 사용되는 Hook. -> (side effects란 컴포넌트의 상태 변화, 외부 API 호출, 구독 및 구독 해제와 같은 작업을 뜻함.)즉, 어떤 state의 값이 변경되거나, 외부 API를 동기적으로 호출하는 등 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 이다.💡 useEffect는 component가 mount 되었을 때, unmount 되었을 때, update 되었을 때 특정 작업을 처리할 수 있다.(useEffect를 통해 기존의 클래스형 컴포넌트에서 사용하던 생명주기(Life cycle) 메소드를 함수형 컴포넌트에서 사용할 수 있게 되었다.)하지만 ..
🙄 리액트에서 배열의 값을 업데이트 하는 방법 (feat. 리액트의 불변성) 안녕하세요! 웹파트 OB 박채연입니다! 😋이번주차 공유과제는 리액트에서 배열의 값을 업데이트 하는 방법에 대해 다뤄보려고 합니다! 지난 자바스크립트 과제에서 우리는 배열을 조작하고 배열을 이용해서 값을 업데이트하는 과정을 많이 구현했는데요.과제 뿐 아니라, 우리가 화면에 보여지는 값을 조작하기 위해선 정말 많이 쓰이는 개념이 배열인 것 같아요! 근데 제가 리액트로 개발하면서 자주 들었던 피드백 중 하나가, "배열의 값을 직접 조작하기보단 복사된 새 배열을 이용해서 값을 업데이트 하는 게 어떠냐"는 내용이었어요. 이런 피드백을 들으면서, 바로 array.push 하면 배열에 쉽게 값을 넣을 수 있는데, 왜 굳이 새 배열에 ...array 하고 ~ 그 다음에 추가하고 ~ setUpdate(array) 하는..
컴포넌트와 Props 안녕하세요! YB 김채은입니다~ 우선 저는... 리액트라는 것을 이번에 처음!! 사용해봤는데요...ㅎㅎ그래서 며칠째 그냥 몰름보반장 상태였습니다 그리고 드디어 Component와 Props에 대해 배웠습니다... 그래서 일단 이 내용을 제가 이해한 대로 한 번 정리해보려 합니다😎이미 대부분 다 아는 내용이겠지만!! 저는 몰랐어요 ~..~ 1. 컴포넌트(Component)란?컴포넌트는 리액트에서 UI를 구성하는 하나의 작은 조각이라고 생각하면 됩니다.웹페이지를 만들 때 다양한 요소들(버튼, 텍스트 박스, 사용자 프로필 등)을 사용하는데, 리액트에서는 각 요소들을 컴포넌트로 만들어 재사용할 수 있어요.  컴포넌트는 1. 화면에 무엇을 보여줄지를 결정하고 2. 다른 컴포넌트들과 함께 UI를 구성합니다! 예를..
리액트의 flux 패턴 "React는 단방향 데이터 바인딩 개념을 가진다." 라는 내용이 세미나 중간에 나옵니다. 과연 단방향 데이터 바인딩은 무엇일까요?React와 단방향 데이터 바인딩 React는 초기에는 양방향 데이터 바인딩을 사용했습니다. 이는 MVC 패턴과 유사한 방식으로 모델(Model)과 뷰(View) 간의 상태가 서로 영향을 주고받으며 실시간으로 동기화되는 구조입니다. 모델의 상태 변화가 뷰에 반영되고 뷰에서 발생한 사용자 입력이 다시 모델의 상태를 바꾸는 양방향 흐름을 가지게 되죠. 이렇게 모델과 뷰가 상호작용하는 양방향 데이터 바인딩은 애플리케이션의 규모가 커질수록 상태 즉 데이터가 많아지면서 데이터의 흐름을 추적하기 힘들어진다는 문제가 발생했습니다. 양방향 데이터 바인딩의 문제점방금 말했듯 양방향 데이터 바..

티스토리툴바