Step by Step

#9장 컴포넌트 스타일링 리액트에서 컴포넌트를 스타일링할 때는 다양한 방식을 사용할 수 있다. 여러 방식 중에서 딱히 정해진 건 없다. • 일반 CSS : 컴포넌트를 스타일링하는 가장 기본적인 방식 • Sass : 자주 사용되는 CSS 전처리기 중 하나로 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성하게 한다 • CSS Module : 스타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성 • styled-components : 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만듬 컴포넌트 스타일링 실습 과정 프로젝트 준비하기 -> 일반 CSS 사용하기 -> Sass..

#8장 Hooks Hooks는 리액트에 새로 도입된 기능으로 함수 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 한다. 리액트 내장 Hooks 사용하기 => 커스텀 Hooks 만들기 8.1 useState useState는 가장 기본적인 Hook이며 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있게 한다. import { useState } from "react"; const Counter = () => { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {value}입니다. setValue(value+1)..

#7장 컴포넌트의 라이프사이클 매서드 모든 리액트 컴포넌트에는 라이프사이클이 존재합니다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝납니다. 이 때는 컴포넌트의 라이프사이클 메서드를 사용합니다. 참고로 라이프 사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있습니다. 업데이트를 발생시키는 뇨인 props 변경, state 변경, 부모 컴포넌트 리렌더링 => getDerrivedStateFromProps =>shouldComponentUpdate => true 반환 시 render 호출, false 반환 시 여기서 작업 취소 => render => getSnapshotBeforeUpdate => componentDudUpldate 7.2 라이프사이클 메서드 ..

#6장 컴포넌트 반복 웹 애플리케이션을 만들다 보면 다음과 같이 반복되는 코드를 작성할 때가 있습니다. 이 장에서는 리액트 프로젝트에서 반복적인 내용을 효율적으로 보여 주고 관리하는 방법을 알아봅니다. const IterationSample = () => { return ( 눈사람 얼음 눈 사람 ) } export default IterationSample; 6.1 자바스크립트 배열의 map()함수 map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있다 6.1.1 문법 arr.map(callback,[thisArg])의 파라미터 callback : 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세 가지이다. currentValue : 현재 처리하고 있는 요소 index : 현재 처리하고 있는..