![]()
컴포넌트 전환 애니메이션 주는 법 (transition) - 전환애니이션 만드는 법 1. 애니메이션 동작 전 className 만들기 2. 애니메이션 동작 후 className 만들기 3. className에 transition 속성 추가 4. 원할 때 2번 className 부착 - useEffect: 컴포넌트가 렌더링 될 때 마다 특정 작업을 실행 할 수 있도록 하는 Hook임 컴포넌트가 마운트 됐을 때, 언마운트 됐을 때, 업데이트 됐을 때, 특정 작업을 처리할 수 있음. - 기본형태 : useEffect(function, deps) - function: 수행하고자 하는 작업 - deps: 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열 1. 컴포넌트가 언마운트 됐을 때( 처음 ..
새로운 프로젝트 생성 & Bootstrap 사용하기 - Bootstrap 라이브러리: 레이아웃을 복사붙여넣기 식으로 편하게 개발가능함 (라이브러리 홈 들어가서 설치하면 됨) 설치 후 react-bootstrap 사이트에서 UI 복사 붙여넣기 가능 ex. button 검색 후 코드 복붙하기 - Navbar import {Navbar, Container, Nav} from 'react-bootstrap'; // 상단에 import 적고 import 'bootstrap/dist/css/bootstrap.min.css'; import './App.css'; function App() { return ( // 코드 복붙하기 Navbar Home Features Pricing ); } export default A..
기초 2강 1. 태그에 class를 주고 싶으면? class 대신 className 작성하기 2. 리액트가 HTML 코딩보다 편리한 이유 1) 데이터 바인딩이 쉬움(데이터 바인딩이 쉬운 React, Vue, Angular) { posts } // {변수명} - 렌더링 시켜주면 됨 - scr, id, href 등의 속성에서도 {변수명, 함수} 등 넣어주면 됨 3. JSX 에서 style 속성 집어넣을 때 style = {object 자료형으로 만든 스타일} 개발 Blog // camelCase로 작성하기 기초 3강 - 데이터 보관법: 1. 변수에 넣거나 2. state에 넣거나 - ES6 destructuring - state: 1) 변수 대신 쓰는 데이터 저장공간 2) useState()를 이용해 만들어..
