본문 바로가기

리액트

리액트의 렌더링 순서와 렌더링 최적화하는 법 (memoization을 통해 불필요한 리렌더링 해결하기!)

Computer Programming/React 2023. 5. 20. 리액트의 렌더링 순서와 렌더링 최적화하는 법 (memoization을 통해 불필요한 리렌더링 해결하기!) 1. 리액트 렌더링의 순서 아래 코드에서 4가지 console.log() 문이 어떻게 출력될지 예상해보자. import React, { useState } from 'react'; import Login from './components/Login/Login'; import Home from './components/Home/Home'; import MainHeader from './components/MainHeader/MainHeader'; import { useEffect } from 'react'; function App() { const [isLoggedIn, setIsLoggedIn] = useState(false); console.log("in function") useEffect(() =>..

Redux 시작하기 / 기본 구조 (Reducer, Subscribe, Dispatch란?)

Computer Programming/React 2023. 5. 17. Redux 시작하기 / 기본 구조 (Reducer, Subscribe, Dispatch란?) node.js로 redux 실행하기 1. Reducer function이란? 리듀서 함수는 표준 자바스크립트 함수이며 리덕스 라이브러리에 의해 호출된다. 인풋은 항상 2개의 파라미터(전의 상태, 액션)를 가지고, 새로운 상태의 객체를 아웃풋으로 갖는 순수한 함수이다. (같은 인풋 → 같은 아웃풋) 즉, Inputs : Old State + Dispatched Action ⬇️ Output : New State Object 또한 리듀서 함수는 Side effects 를 생성하지 않아야한다. 예를 들면, 서버에 HTTP 요청을 보낸다거나 로컬 저장소에 데이터를 보내는 등의 코드는 없어야 한다. const redux = require('redux'); //node.js syntax (= import redux..

Redux(리덕스) 사용 이유 (Context와 차이점)와 작동방식

Computer Programming/React 2023. 5. 16. Redux(리덕스) 사용 이유 (Context와 차이점)와 작동방식 1. Redux란? 리덕스는 cross-component 또는 app-wide 상태를 위한 상태 관리 시스템이다. 즉, 다수의 컴포넌트 또는 앱 전체에서 상태 변경을 관리하도록 도와주는 시스템이다. 2. State의 세가지 정의 1) local state : 하나의 컴포넌트 내에서 데이터가 변경되어 해당 컴포넌트에 속하는 UI에 영향을 미치는 state이다. 주로 useState을 이용해 state 변수에 저장한다. 예를 들면, input field를 켜고 끄는 “show more” 토글 버튼이 있다. 컴포넌트가 약간 복잡하다면 useState을 사용할 수도 있지만 useReducer을 많이 사용한다. 2) cross-component state : 두개 이상의 컴포넌트에 영향을 미치는 state이다. ..

JSX란? React 에서 사용하는 JSX 문법 | Babel

Computer Programming/React 2023. 5. 15. JSX란? React 에서 사용하는 JSX 문법 | Babel 1. JSX란? React에서의 JSX const element = Hello, world!; 위 태그 문법은 JSX 라고 불리는 javascript를 확장한 리액트에서 차용하는 문법이다. 리액트와 함께 사용되는 이유는 리액트가 UI와 state 의 변화에 초점을 맞추는 라이브러리이기 때문에 자바스크립트 함수와 html 태그를 함께 사용하는 것이 효과적이기 때문이다. 즉, react 에서는 렌더링 로직이 ui로직 ( 이벤트 처리, state 변화, 데이터 준비방식) 과 밀접한 연관이 있다. 따라서 마크업인 html 태그와 함께 로직을 처리할 수 있는 JSX를 사용한다. React에서 JSX 문법 사용이 필수는 아니지만, Javascript 코드와 함께 ui 관련 작업을 쉽게 할 수 있는 html 태그를 ..

리액트 프로젝트 설치하기 (create-react-app or vite)

Computer Programming/React 2023. 5. 14. 리액트 프로젝트 설치하기 (create-react-app or vite) 1. 리액트 코드와 브라우저 호환 리액트 코드는 브라우저에서 바로 호환가능한 코드가 아니다. 예를 들면, 자바스크립트로만 구성된 웹페이지는 한 프로젝트 폴더 안에 .html / .js / .css 파일들만 있으면 브라우저에서 바로 동작 가능하지만 리액트 코드 웹페이지는 코드를 자동으로 변환해주는 작업을 포함해야한다. 또한, 리액트 코드로 웹을 개발하면서 실시간으로 브라우저에서 동작하는 과정을 관찰해야 하고 이를 위해서는 백그라운드에서 코드 변환이 일어나야 한다. 리액트를 사용하면 하나의 .js 파일에 자바스크립트와 JSX (html처럼 보이는 것) 을 함께 작성하기 때문에 이 자바스크립트 파일만으로는 브라우저에서 유효하지 않고, 브라우저는 이 코드 자체 만으로는 실행할 수 없다. => 따라서 브라우저가 ..

[React] 리액트란? 리액트를 사용하는 이유? (vs. Vanilla js)

Computer Programming/React 2023. 5. 14. [React] 리액트란? 리액트를 사용하는 이유? (vs. Vanilla js) 1. Javascript만을 사용한 코드는? 자바스크립트는 명령형 접근방식(imperative approach)이기 때문에 모든 단계를 설명하는 것이 중요하다. 예를 들면 화면에 특정한 페이지를 띄우는 방식 등에서 일련의 액션들을 단계별로 설명해야한다. -> 모든 단계를 명시하는 과정에서 한계가 나타날 수 있고 세부사항들을 신경써야한다. 이는 되풀이되고 반복적인 액션들을 작업하게 될 수 있다. 2. 리액트(React.js)란? 리액트는 client-side 자바스크립트 라이브러리이며 모던, 반응형 유저 인터페이스관리에 용이하다. Declarative and component-focused approach 3. React.js의 장점은? 리액트를 사용하면 같은 방식으로 동작하지만 훨씬 더 간결한 코드로 작..

이전 1 다음

Archives

Recent Posts

Tags

더보기

Calendar

티스토리툴바

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*