[React] 리액트(CRA) 프로젝트 세팅하기 - typescript, alias, emotion CRA로 리액트 프로젝트 세팅하기 typescript 경로 alias emotion 리액트로 토이프로젝트를 하게 되면 주로 위의 세팅을 기본적으로 이용한다. 순서대로 적용하는 법을 정리하고자 한다. #1 CRA로 typescript 리액트 프로젝트 생성 npx create-react-app my_project --template typescript 프로젝트를 생성하고자 하는 위치에서 터미널을 열어 위의 명령어를 입력한다. 명령줄의 my_project 부분에 프로젝트명을 입력한다. 프로젝트가 생성되었다면 아래부터는 프로젝트 내부에서 설정하는 부분이다. #2 alias 설정 리액트 프로젝트를 할 때, 상대경로로 찾아가려면 적어도 두 번, 많게는 네다섯 번까지 경로를 타고 올라가야 할 때가 있다. 이 부분을 .. 2021. 10. 21. [React] 리액트 Hooks의 useState와 useEffect / React Hooks 란? 리액트 v16.8로 업데이트 되면서 함수형 컴포넌트와 Hooks 사용을 권장하고 있다. Hook은 함수형컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동(hook into)할 수 있게 해주는 함수이다. 클래스형 컴포넌트 안에서는 동작하지 않지만 클래스형 컴포넌트없이 리액트를 사용할 수 있게 해준다. 장점 컴포넌트로부터 상태 관련 로직을 추상화할 수 있다. 생명주기를 사용했을때 일어나는 버그와 무결성 문제를 보완할 수 있다. 클래스형 컴포넌트의 this로 인한 혼동과 코드양을 줄인다. / 함수형 컴포넌트 import React from 'react'; const App = () => { return( 안녕하세요! ) } export .. 2020. 3. 18. [React] 리액트 인라인 스타일 적용 더블브라켓을 사용하여 인라인 스타일을 적용할 수 있다.(권장되지 않음) 2019. 10. 27. 이전 1 다음
