리액트 공부11 React - 10장 : To-do 앱 실습(컴포넌트 렌더링최적화, Hooks 활용) React - 1장 : React 이해 React - 2장 : JSX React - 3장 : 컴포넌트 React - 4장 : 이벤트 핸들링 React - 5장 : ref. DOM에 이름 달기 React - 6장 : 컴포넌트 반복 React - 7장 : 컴포넌트의 LifeCycle React - 8장 : React Hooks 총정리 React - 9장 : 컴포넌트의 스타일링 React - 10장 : 빠르게 TODO앱 실습(현재) 누구나 만들어보는 투두앱을 빠르게 만들어서 컴포넌트최적화와 Hooks를 적용해보자. 10-1. 프로젝트 생성 - npx create-react-app todo-app 10-2. UI 구성 - TodoTemplate : 화면을 가운데에 정렬시켜 주며, 앱 타이틀을 보여준다. chil.. 2023. 2. 17. React - 9장 : 컴포넌트의 스타일링 React - 1장 : React 이해 React - 2장 : JSX React - 3장 : 컴포넌트 React - 4장 : 이벤트 핸들링 React - 5장 : ref. DOM에 이름 달기 React - 6장 : 컴포넌트 반복 React - 7장 : 컴포넌트의 LifeCycle React - 8장 : React Hooks 총정리 React - 9장 : 컴포넌트의 스타일링(현재) 리액트에서 컴포넌트를 스타일링 할때는 다양한 방식을 사용한다. 여러 방식 중에서 정해진 것은 없지만 자주 사용하는 방식을 알아보자. 어차피 css에 대한 포스팅은 아니므로 빠르게 넘어간다. 9-1. 일반 css (제일 많이 사용) - .css파일을 별도로 생성하여 사용한다. 별거 없다. - 이름 짓는 규칙 : BEM을 주로 사용.. 2023. 2. 16. React - 8장 : React 자주 쓰이는 Hooks 총 정리 React - 1장 : React 이해 React - 2장 : JSX React - 3장 : 컴포넌트 React - 4장 : 이벤트 핸들링 React - 5장 : ref. DOM에 이름 달기 React - 6장 : 컴포넌트 반복 React - 7장 : 컴포넌트의 LifeCycle React - 8장 : React Hooks 총정리 (현재) Hooks는 v16.8에 도입된 기능으로 함수컴포넌트에서도 useState, useEffect등의 기능을 제공하여 다양한 작업을 할 수 있도록 해준다. 8-1. useState - 함수 컴포넌트에서 가변적인 상태를 지닐 수 있도록 해준다. import {useState} from 'react'; const Counter = ()=>{ const [value, setVa.. 2023. 2. 15. 이전 1 2 다음
