리액트 한방8 React - 11장 : 컴포넌트 성능 최적화 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앱 실습 React - 11장 : 컴포넌트 성능 최적화(현재) 지난 10장에 이어서 같은 프로젝트를 이용해서 설명하므로, 10장의 프로젝트를 만든 다음에 실습해보자. 11.1 많은 데이터 렌더링해보기 - 실제로 Lag을 경험할 수 있또록 많은 데이터를 렌더링 해보자. App.js import {u.. 2023. 2. 18. 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 - 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. React - 1장 : React 이해 앞으로 포스팅할 React 빠르게 복습하기 내용은 React를 익힌지 오래되었거나, 공부를 한 두번 해봤는데 맥락을 이해하기 어렵거나, 이해는 했는데 자주 잊어버리는 경우 훑어보면서 빠르게 복습할 수 있도록 간결화하여 포스팅합니다. 1-1. 리액트를 왜 쓰는가 1) React Library - 많은 프레임워크들이 순수한 자바스크립트만으로 다양한 어플리케이션을 편하게 관리하려고 노력해왔다. - React.js, Vue.js, Angular.js, Backbone.js, Ember.js 등등 - 이들은 주로 MVC(Model-View-Controller)패턴, MVVM(Model-View-View Model)패턴을 사용한다. - Model : 어플리케이션에서 사용하는 데이터/구조를 관리하는 영역 - View.. 2023. 2. 1. 이전 1 다음
