민ズl으l 개발일ブl

리액트에서 랜더링이란🤔컴포넌트의 UI를 화면에 표시하는 과정 랜더링 트리거🕸️컴포넌트가 다시 랜더링되도록 만드는 원인랜더링되는 경우👀1. 처음 리액트 앱을 실행했을때2. 현재 컴포넌트 내부의 state가 변경됐을때3. 현재 컴포넌트에 새로운 props가 들어올때4. 상위 부모 컴포넌트에서 위에 2,3번 이유로 랜더링이 발생했을 때 브라우저 랜더링 vs 리액트 랜더링브라우저의 랜더링과 리액트의 랜더링은 다른 프로세스임!브라우저의 랜더링전체 웹 페이지를 처리하는 과정이며, 실제 DOM을 사용리액트의 랜더링가상 DOM을 사용하여 상태 변화에 따른 UI 업데이트를 효율적으로 처리하는 과정DOM vs 가상 DOM (Virtual DOM)DOM브라우저는 실제 DOM을 사용하여 페이지를 렌더링사용자가 페이지를 ..

리액트에서 컴포넌트는 중요한 개념🌟개념적으로 컴포넌트는 javascript 함수와 유사! props라는 input을 받아서 react 앨리먼트라는 output을 반환 🔸리액트 컴포넌트 표현방법1. 함수형 컨포넌트(권장)// props라는 입력을 받음// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼트를 return!function Welcome(props) { return Hello, {props.name};}// 위와 같음function App () { return hello}2. 클래스형 컴포넌트(구식)class Welcome extends React.Component { render() { return Hello, {this.props.name}; }}컴포넌트 네이밍📛대문자로..

리액트 공식문서에서는 리액트를 다음과 같이 소개했다. The library for web and native user interfaces  여기서 라이브러리란🤔공통 기능의 모듈화가 이루어진 프로그램의 집합!"개발자"가 "필요한 기능만"을 골라서 사용가능vs 프레임워크란애플리케이션을 개발하기 위한 구조와 규칙을 제공하는 플랫폼"프레임워크"에 맞춰 코드를 작성해야 함🚫 리액트가 라이브러리인 이유: 개발자가 애플리케이션의 흐름과 구조를 완전히 제어가능, 전체적인 애플리케이션 아키텍처를 제어하려고 안함 리액트는 SPA로 설계*SPA : Single Page  Application의 약자로, 하나의 html 페이지로 이루어진 애플리케이션을 의미 그럼 어떻게 하나의 페이지로 여러 웹 서비스를 이용하는 걸까❓바로..