Frontend42 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. React - 7장 : 컴포넌트의 Lifecycle Method React - 1장 : React 이해 React - 2장 : JSX React - 3장 : 컴포넌트 React - 4장 : 이벤트 핸들링 React - 5장 : ref. DOM에 이름 달기 React - 6장 : 컴포넌트 반복 해당 포스팅은 23년 기준 지금은 잘 사용하지 않는 class형 Component의 라이프사이클에 대해서 설명하고 있다. 현재에는 함수형 Component를 주로 사용한다. 참고로만 알아두자. 7-1. 라이프사이클 메서드의 이해 - 모든 리액트 컴포넌트에는 라이프사이클이 존재하며, 렌더링 되기 전 준비과정에서 시작하여 페이지에서 사라질 때 끝난다. - 라이프사이클 메서드는 class형 컴포넌트에만 사용할 수 있다. - 총 세 가지 [마운트, 업데이트, 언마운트] 의 카테고리로 나.. 2023. 2. 14. React - 6장 : 컴포넌트 반복 6-1. 자바스크립트 배열의 map() 함수 - 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있다. - map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성한다. 1) 문법 // 기본문법 arr.map(callback, [thisArg]) // 예제 const numbers = [1, 2, 3, 4, 5]; const result = numbers.map(num => num * num); console.log(result); - callback : 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세가지 - currentValue : 현재 처리하고 있는 요소 - index : 현.. 2023. 2. 13. React - 5장 : ref. DOM에 이름 달기 - 일반 HTML에서 DOM 요소에 이름을 달 때는 id를 사용한다. - 요소에 id를 달면 css에서 특정 스타일을 적용하거나 자바스크립트로 해당 요소에 작업을 할 수 있다. 5-1. ref(reference) - HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있다. - 리액트 컴포넌트에 id를 사용하는 것은 권장하지 않는다. - 컴포넌트는 여러 번 사용할 수 있는데 id는 유니크한 값이기 때문에 잘못된 사용이 될 수 있다. - ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 떄문에 문제가 발생하지 않는다. 1) ref는 어떤 상황에서 사용해야 할까? - DOM을 꼭 직접적으로 건드려야 할 때 사용한다. - 특정 input에.. 2023. 2. 9. React - 4장 : 이벤트 핸들링 4-1. 리액트의 이벤트 시스템 1) 이벤트를 사용할 때 주의 사항 - 이벤트 이름은 카멜 표기법으로 작성한다. - ex) onclick(x) -> onClick - 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다. - DOM 요소에만 이벤트를 설정할 수 있다. - 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다. 4-2. 예제로 이벤트 핸들링 익히기 1) onChange 이벤트 - onChange 이벤트는 Form 요소에 값이 변하면 발생하는 이벤트이다. - onChange 함수안에 e 객체는 SyntheticEvent, 웹 브라우저의 네이티브 이벤트를 감싸는 객체이다. - 이벤트가 끝나고 나면 초기화되므로 정보를 참조할 수 없다. - 만약 비동기적으로 .. 2023. 2. 8. React - 3장 : 컴포넌트 3-1. 컴포넌트를 선언하는 방식 - 컴포넌트를 선언하는 방식은 크게 두가지이고 클래스형과 함수형이 있다. 1) 클래스형 컴포넌트 - 클래스형 컴포넌트에서는 render 함수가 꼭 있어야 하고, 그 안에서 보여주어야 할 JSX를 반환해야 한다. - state와 라이프사이클 API 사용이 가능하다. - 임의 메서드를 정의가 가능하다. import React, { Component } from 'react'; class App extends Component { render() { const name = 'react'; return {name}; } } export default App; 2) 함수형 컴포넌트 - 클래스형 컴포넌트보다 선언하기가 훨씬 편하다. - 메모리 자원도 클래스형 컴포넌트보다 덜 사용한.. 2023. 2. 6. 이전 1 2 3 4 5 6 다음
