본문 바로가기

강의20

[React JS 마스터클래스] #3 TYPESCRIPT 정리 #3.0 Introduction - 타입 문법과 함꼐하는 자바스크립트 - 추가 : 타입 체크, 자동 완성, 인터페이스, JSX 문법 - 언어 작동 전에 타입 확인함 => stongly-type - 브라우저는 자바스크립트만 이해할 수 있음 => 타입스크립트는 이해 X - 컴파일 시 자바스클비트로 변경 -> 실행 전에 타입 체크 하고 오류 알려줌 #3.1 DefinitelyTyped CRA로 타입스크립트 프로젝트 생성 1. [npx or yarn] create-react-app [내 앱 이름] --template typescript 2. yarn add styled-components 로 스타일드 컴포넌트 먼저 설치 3. yarn add @types/styled-components -D 으로 타입스크립트 타.. 2024. 1. 23.
[React JS 마스터클래스] #2 STYLED COMPONENTS 정리 #2.0 Why Styled Components 스타일드 컴포넌트를 사용하는 이유와 장점 스타일 적용하는 방법 : 직접 자바스크립트로 스타일 입혀주는 방식, 글로벌 css 파일 import, css 모듈 import #2.1 Our First Styled Component yarn add styled-components로 설치 import styled from " styled-components" 임포트 const Box = styled. ` (css 코드) ` 형식으로 사용 가능 실제 코드에서는 자동으로 클래스를 생성하여 스타일 삽입 #2.2 Adapting and Extending 스타일 컴포넌트와 props 사용하기 - 스타일 컴포넌트로 props를 보내고, css 내에서 표현식으로 값 사용 확장가.. 2024. 1. 21.
[리액트 숙련주차] 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.

티스토리툴바