기록

프로젝트 생성 npx create-next-app --typescript 프로젝트 구조 왼쪽 - 프로젝트 설치시 기본 구조 오른쪽 - 기존 리액트 프로젝트에서 src폴더에 파일들을 관리했었기때문에 익숙한 구조로 구조변경 당장에 사용하지않는 파일 및 폴더 삭제 public 폴더는 남겨놔야한다 안에 들어가있는 favicon 404 에러가 표출된다... Babel 설정 프로젝트 root에 .babelrc 파일생성 { "presets": ["next/babel"] } 프로젝트 실행 npm run dev or npm run build && npm start

클래스 컴포넌트 - lifecycle 과 state를 사용할 수 있다. class App extends Component { render() { return ( ) } } export default App; 함수 컴포넌트 - state를 사용할수 없었으나 훅이 업데이트되면서 사용가능 - useEffect 로 lifecycle 과 유사한 기능을 사용가능 - 근래엔 함수컴포넌트를 많이 사용함. - 리액트에서도 함수 컴포넌트 사용을권장 - 클래스보다 선언이 편리하고 메모리자원을 덜 사용 한다 const App = () => { return } export default App;

소스코드 import { useState } from 'react'; import styled from 'styled-components'; const StyledCollapse = styled.div` .content{ background: blue; color: white; max-height: 0; bottom: 0; overflow: hidden; -webkit-transition: max-height 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); transition: max-height 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); } .content.on { max-height: 500px; -webkit-transition: max-h..

React? 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 Javascript 라이브러리 시작하기 CRA 설치 CRA: webpack 등 별도의 세팅없이 리액트를 사용할수 있는 보일러플레이트 npx create-react-app project-name ## typescript 추가시 --template typescript cd project-name npm start 쓰지않는 파일들 제거