본문 바로가기

React6

Context useContext는 기존의 React에 존재하는 Context를 더 편하게 사용할 수 있게 해주는 역할 Context 개념 context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있음 (React공식문서) ⇒ 데이터가 필요할 때마다 props를 통해 전달할 필요 없이 context 로 공유 가능 context API createContext : context 객체 생성 Provider : 생성한 context를 하위 컴포넌트에게 전달 Consumer : context의 변화를 감시하는 컴포넌트 2023. 8. 31.
React에서의 불변성(Immutability) 1. 불변성 - 변하지 아니하는 성질. - 공간 좌표의 반전, 시간 반전, 회전, 로런츠 변환 따위의 특정한 변환이나 연산으로도 변화하지 않는다고 하는, 물리량이나 물리 법칙이 갖는 성질 2. JavaScript에서 원시타입의 값들은 불변성을 가지고 있음 string, number, bigint, boolean, undefined, symbol, null 모든 원시 값은 불변하여 변형할 수 없음 (https://developer.mozilla.org/ko/docs/Glossary/Primitive) 참조형 값들(객체, 배열, 함수 등) 은 다르게 동작 number가 참조하고 있는 apple의 주소 값은 변경된다. 복사되는 것이 아닌 참조값을 갖게되기 때문에, 사본을 수정하게 되면 원본도 수정됨 let s.. 2023. 8. 30.
setState할 때 […] 하는 이유 (ChatGPT) setState 할때 […] ←— 하는 이유 분석하기 언제 써야하고, 안써야 하는지 setState 함수는 React 라이브러리에서 상태(state) 관리를 위해 사용되는 함수입니다. 이 함수를 호출하면 React 컴포넌트의 상태를 업데이트하고, 컴포넌트를 다시 렌더링하도록 스케줄링합니다. setState 함수에 전달되는 값은 변경된 상태를 나타내며, 이 값은 새로운 상태로 컴포넌트를 업데이트할 때 사용됩니다. setState 함수를 사용할 때 [...] 형태로 이전 상태를 업데이트하는 이유는, React의 상태 업데이트는 불변성(Immutability)을 유지하면서 이루어져야 하기 때문입니다. 이는 다음과 같은 이유로 중요합니다: 성능 최적화: React는 가상 DOM (Virtual DOM)을 사용하.. 2023. 8. 30.
setState할 때 […] 하는 이유 setState 역할 setState()가 쓰일 때, 컴포넌트의 state 객체에 대한 업데이트를 실행 state가 변경되면, 컴포넌트는 리 렌더링 state와 props의 차이점 props와 state는 Javascript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있습니다. props는 컴포넌트에 전달되며, state는 컴포넌트 안에서 관리되는 차이점이 있습니다. 언제 setState가 비동기로 작동할까? import React, { useState } from "react"; function App() { const [state, setState] = useState(1); const onClick = () => { setState(state + 1); console.log.. 2023. 8. 30.
React 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 선언형 React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다. 선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만들어 줍니다. 컴포넌트 기반 스스로 상태를 관리하는 캡슐화된 컴포넌트를 만드세요. 그리고 이를 조합해 복잡한 UI를 만들어보세요. 컴포넌트 로직은 템플릿이 아닌 JavaScript로 작성됩니다. 따라서 다양한 형식의 데이터를 앱 안에서 손쉽게 전달할 수 있고, DOM과는 별개로 상태를 관리할 수 있습니다. 간단한 컴포넌트 React 컴포넌트는 render()라는 메서.. 2023. 8. 30.
React & JSX (Java Script XML) 메타에서 개발한 오픈 소스 자바스크립트 라이브러리. 프론트엔드 개발자 사이에서 AngularJS, Vue.js와 더불어 많은 인기를 얻고 있다. GitHub Star 수와 npm 패키지 다운로드 수는 React가 가장 많다. SPA을 전제로 하고 있으며, Dirty checking과 Virtual DOM을 활용하여 업데이트 해야하는 DOM 요소를 찾아서 해당 부분만 업데이트하기 때문에, 리렌더링이 잦은 동적인 모던 웹에서 엄청나게 빠른 퍼포먼스를 내는게 가능하다. 기본적으로 모듈형 개발이기 때문에 생산성 또한 상당히 높은 라이브러리인지라 순식간에 대세로 떠올랐다. 거기에 기본적으로 프레임워크가 아니라 라이브러리인지라 다른 프레임워크에 간편하게 붙여서 사용하는 것도 가능하며, React Hooks라는 강력.. 2023. 8. 30.

티스토리툴바