정리10 [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-10 Lifecycle 2-10 Lifecycle 1. 생명주기란? [Mount] -> [Update] -> [Unmount] - 컴포넌트 중심 라이브러리의 집합체 - 리액트 컴포넌트에는 각각 생명주기가 존재하고 각 생명주기에 맞는 메서드들이 존재 - 클래스형 컴포넌트에서 적용했었던 메서드들을 많이 이야기하기 때문에 많이 시간 할애 X 2. 생명주기별 메서드 1. Mount : 컴포넌트가 생성될 때 constructor 생성자 함수 컴포넌트가 맨 처음 만들어질 때 호출 getDerivedStateFromProps 부모 컴포넌트로부터 props를 전달받을 때, state에 값을 일치시키는 역할 마운트 될 때, 업데이트(리렌더링) 될 때도 호출 render 최초 mount가 준비완료 되면 호출되는, 렌더링하는 메서드 컴포넌트를 D.. 2023. 6. 29. 이전 1 2 3 다음
