본문 바로가기

스파르타코딩클럽18

[리액트 숙련주차] 2-21~23 비동기 프로그래밍 2-21 비동기 프로그래밍 입문 1. 동기 방식과 비동기 방식 동기적(synchronous) 방식 - 현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식 - 일반적 프로그래밍 세계에서 코드는 모두 동기적으로 실행됨 비동기적(not synchronous) 방식 - 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식 - setTimemout, addEventListner 등 - 별도의 요청, 실행 대기, 보류 등과 관련된 코드는 모두 비동기적 코드 - 대표적으로 서버 통신과 관련된 로직들을 포함함 ex) 중식집에서 배달 후 배달원이 다먹을때까지 기다렸다가 그릇을 회수하지 않고, 다른 집도 갔다가 다시 찾으러 오는 것과 비슷함 2. 콜백지옥 - 콜백함수를 익명함수로 전달하는 과정이 반복.. 2023. 7. 11.
[리액트 숙련주차] 2-19~20 React Router Dom (1), (2) 1. React Router Dom 이란? - 페이지를 구현할 수 있게 해주는 패키지 - routing 2. React Router Dom 설치 yarn add react-router-dom 3. React Router Dom 사용하기 1. 페이지 컴포넌트 작성 - src 폴더에 pages 폴더를 만들고, 내부에 여러 페이지가 될 컴포넌트 파일을 만든다. 2. Router.js 파일 구현 - 브라우저에 url을 입력하고 이동했을 때 원하는 페이지 컴포넌트로 이동하게끔 만들어주기 -> 즉 url 1개당 페이지 컴포넌트를 매칭해주는 것 Route - src 폴더에 shared 폴더를 생성하고, Router.js 파일을 생성한다. import React from "react"; import { BrowserR.. 2023. 7. 1.
[리액트 숙련주차] 2-12~18 Redux 2-12 Redux 소개 1. 리덕스가 필요한 이유 - 리덕스란? 상태 관리 라이브러리 - useState의 불편함 : prop-driling - state를 공유하고자 할 때, 부모 관계가 아니여도 되고 중간 컴포넌트를 거치지 않아도 됨 - 자식에서 만든 state를 부모에서도 사용할 수 있게 해 줌 => 즉, 중앙 데이터 관리소 (context API vs Redux context는 상위 컴포넌트의 값 하나만 바뀌어도 하위가 모두 렌더링되어야 하는 단점 有) 2. Global state, Local state - Local state 지역 상태란? 컴포넌트에서 useState를 이용해서 생성한 state - Global state 전역 상태란? 중앙화 된 특별한 곳에서 생성됨. 중앙 state 관리소.. 2023. 6. 30.
[리액트 숙련주차] 2-11 DOM과 Virtual DOM 2-11 DOM과 Virtual DOM 1. 가상돔이란? - 리액트나 뷰는 가상돔을 사용해서 원하는 화면을 브라우저에 그려줌 - 자체적으로 효율적인 알고리즘을 사용하여 그려주기 때문에 속도가 어마어마함 2. DOM (Document Object Model) - 브라우저는 수많은 컴포넌트로 구성되어있음 -> 문서(document) - 페이지를 이루는 컴포넌트를 엘리먼트(element)라고 함 => DOM은 엘리먼트를 tree형태(DOM tree)로 표현한 것 - 트리의 요소 하나하나를 노드라고 부르고, 해당 노드에 접근과 제어할 수 있는 API를 제공함 - API : HTML요소에 접근해서 수정할 수 있는 함수 // id가 demo인 녀석을 찾아, 'Hello World!'를 대입해줘. document.g.. 2023. 6. 30.
[리액트 숙련주차] 2-10 Lifecycle 2-10 Lifecycle 1. 생명주기란? [Mount] -> [Update] -> [Unmount] - 컴포넌트 중심 라이브러리의 집합체 - 리액트 컴포넌트에는 각각 생명주기가 존재하고 각 생명주기에 맞는 메서드들이 존재 - 클래스형 컴포넌트에서 적용했었던 메서드들을 많이 이야기하기 때문에 많이 시간 할애 X 2. 생명주기별 메서드 1. Mount : 컴포넌트가 생성될 때 constructor 생성자 함수 컴포넌트가 맨 처음 만들어질 때 호출 getDerivedStateFromProps 부모 컴포넌트로부터 props를 전달받을 때, state에 값을 일치시키는 역할 마운트 될 때, 업데이트(리렌더링) 될 때도 호출 render 최초 mount가 준비완료 되면 호출되는, 렌더링하는 메서드 컴포넌트를 D.. 2023. 6. 29.
[리액트 숙련주차] 2-3~9 React Hooks 2-3 useState 1. useState란? const [state, setState] = useState(초기값); - 가장 기본적인 hook - 함수형 컴포넌트 내에서 가변적인 상태를 갖게 함 - 카운터, Todolist 2. 함수형 업데이트 // 기존에 우리가 사용하던 방식 setState(number + 1); // 함수형 업데이트 setState(() => {}); // 현재 number의 값을 가져와서 그 값에 +1을 더하여 반환한 것 입니다. setState((currentNumber)=>{ return currentNumber + 1 }); - 차이점 : 배치 업데이트 (state 파악하는 방법) - 함수형은 동시에 명령을 내리면 명령을 모아 순차적으로 각각 한번씩 실행해줌 - 배치(b.. 2023. 6. 29.
[리액트 숙련주차] 2-1~2 Styled Components 2-1 Styled Components (개요) 1. Css-in-JS 방식 - JS 코드 -> CSS 코드 - JS코드로 컴포넌트를 꾸미는 방식 - Styled Components 패키지 사용 2. 패키지란? - 외부에서 가져와서 사용할 수 있는 라이브러리 - 3rd party - vsCode extension -> "vscode-styled-components" 설치 -> 터미널에서 "yarn add styled-compone nts" 하여 설치 3. Styled Components 사용 - 꾸미고자 하는 컴포넌트를 Styled Component 방식으로 만들고, 스타일 코드 작성하는 방식으로 사용 // src/App.js import React from "react"; // styled-compon.. 2023. 6. 29.
[리액트 입문주차] 1-17 Styling ~ 1-21 컴포넌트 분리하기 1-17 Styling, Map import React from "react"; const App = () => { const style = { padding: "100px", display: "flex", gap: "12px", }; const squareStyle = { width: "100px", height: "100px", border: "1px solid green", borderRadius: "10px", display: "flex", alignItems: "center", justifyContent: "center", }; return ( 감자 고구마 오이 가지 옥수수 ); }; export default App; 1-18 반복되는 컴포넌트 처리하기 (1) .. 2023. 6. 24.
[리액트 입문주차] 1-15~16 컴포넌트와 렌더링 1-15 Component & Rendering 1. 컴포넌트란? - 리액트의 핵심 빌딩 블록 중 하나 - UI요소를 표현하는 최소한의 단위, 화면의 특정 부분이 어떻게 생길지 정하는 선언체 2. 명령형 vs 선언형 프로그래밍 - DOM (명령형 프로그래밍) > 어떻게(How)를 중요시하여 프로그램의 제어 흐름과 같은 방법을 제시하고 목표 명시 X > 직접 DOM 객체를 조작하는 명령형 방식 - 선언형 프로그래밍 > 무엇(What)을 중요시하여 제어의 흐름보다 목적을 중요시여기는 형태 > UI를 선언하고 render함수를 호출하면 리액트가 알아서 절차를 수행해 화면에 출력해줌 >> 프론트영역이 비대해지기 때문에 생성됨 3. 렌더링이란? - 컴포넌트가 현재 props와 state의 상태에 기초하여 UI를 .. 2023. 6. 24.
[리액트 입문주차] 1-14 불변성과 순수함수 1-14 불변성 & 순수함수 1. 생명주기 Mount - Update - Unmount 랜더를 통해 떠오르고, 갱신되고 죽는 과정 2. 불변성 - 메모리에 있는 값을 변경할 수 없는 것 - 원시데이터(숫자, 문자, 불리언 등)는 불변성이 있다 - 원시데이터가 아닌 것(객체, 배열, 함수 등)들은 불변성이 없음 - 불변성이 있다는 것 => 값을 수정해도 메모리에 저장된 값에는 변화가 없음. 다시 메모리 공간 생성하여 재할당 - 불변성이 없다는 것 => 주소값을 저장하기 때문에 값을 수정하면 메모리는 그대로 있고 내용만 바뀜 3. 리액트의 렌더링 - 컴포넌트가 화면에 그려지기 위해서 렌더링을 함 - 랜더링의 조건? state 값의 변화 - state값이 변화하면 감지하여 화면을 리렌더링 해줌 - 렌더링 할지.. 2023. 6. 24.
[리액트 입문주차] 1-12~13 State 1-12~13 State(1), (2) 1. State란? - 컴포넌트 내부에서 바뀔 수 있는 값 - 변경될 수 있는 값은 state로 선언 - UI로의 반영을 위해 필요! - 랜더링을 다시 하기 위해서 2. useState 훅 - useState("초기값")의 반환값은, 초깃값을 가지는 변수와 변수를 다룰 수 있는 메서드를 가진 배열을 리턴해 줌 => const [state, setState] = useState("초기값") - hook : 특정한 기능을 수행하는 함수! 3. State 변경하기 - setValue(바꾸고 싶은 값) 예제 1 - props로 변경하기 // src/App.js import React, { useState } from "react"; function Child(props) .. 2023. 6. 24.
[리액트 입문주차] 1-5 React Component ~ 1-11 Props 추출 1-5 React Component 1. 리액트 컴포넌트란? - 컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고 개별적으로 살필 수 있음 - 개념적으로는 js 함수와 유사 - props 라는 입력을 받아 화면을 표시하는 React 엘리먼트를 반환 - input이 들어가면 output이 나오는 형태 - 즉 props를 입력하여 html(JSX)을 리턴하는 함수 2. 함수형 컴포넌트, 클래스형 컴포넌트 // props라는 입력을 받음 // 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return) function Welcome(props) { return Hello, {props.name}; } // 훨씬 쉬운 표현을 해보면 아래와 같죠. function App () .. 2023. 6. 24.

티스토리툴바