hyeonzzz's Tech Blog

15장 Context API 15.1 Context API를 사용한 전역 상태 관리 흐름 이해하기 Context API를 이용하면 Context를 만들어 한번에 원하는 값을 받아와서 사용할 수 있다! 15.2 Context API 사용법 익히기 15.2.1 새 Context 만들기 새 Context를 만들 때는 createContext 함수를 사용 15.2.2 Consumer 사용하기 children 있어야 할 자리에 중괄호를 열어서 함수를 넣어준다 -> Function as a child, Render Props 15.2.3 Provider Context의 value를 변경한다 value 값을 명시해 주지 않으면 작동하지 않는다! 15.3 동적 Context 사용하기 15.3.1 Context 파일 수..

9장 컴포넌트 스타일링 9.1 가장 흔한 방식, 일반 CSS ● CSS 클래스가 중복되지 않게 하는 방법 이름 짓는 규칙 : 컴포넌트이름-클래스 CSS Selector : 특정 클래스 내부에 있는 경우에만 스타일을 적용 9.2 Sass 사용하기

8장 Hooks Hooks : useState, useEffect 등의 기능을 제공하여 다양한 작업을 할 수 있게 해준다 8.1 useState ● useState : 함수 컴포넌트에서 상태를 관리해야 할 때 사용 ● useState 사용해서 숫자 카운터 구현해보기 1. src 디렉터리에 Counter.js 파일 생성 //Counter.js import React from 'react'; import { useState } from 'react'; const Counter = () => { const [value, setValue] = useState(0); /*카운터의 기본값을 0으로 설정한다 이 함수가 호출되면 배열을 반환한다 배열의 첫 번째 원소는 상태 값, 두 번째 원소는 상태를 설정하는 함수이다..

7장 컴포넌트의 라이프사이클 메서드 7.1 라이프사이클 메서드의 이해 ● 컴포넌트의 라이프사이클 1. 마운트 : DOM이 생성되고 웹 브라우저상에 나타나는 것 ▶ 마운트할 때 호출하는 메서드 constructor getDerivedStateFromProps render componentDidMount 2. 업데이트 : 컴포넌트 정보를 업데이트하는 것 ▶ 컴포넌트가 업데이트 하는 경우 props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 리렌더링될 때 this.forceUpdate로 강제로 렌더링을 트리거할 때 ▶ 업데이트할 때 호출하는 메서드 getDerivedStateFromProps shouldComponentUpdate render getSnapshotBeforeUpdate componentD..

3장 컴포넌트 3.1 클래스형 컴포넌트 ● 컴포넌트를 선언하는 방식 - 함수 컴포넌트 -클래스형 컴포넌트 ● 차이점 클래스형 컴포넌트 -> state 기능, 라이프 사이클 기능, 임의 메서드를 정의할 수 있음 but, 함수 컴포넌트도 Hooks라는 기능이 도입되면서 해결 3.2 첫 컴포넌트 생성 ● 함수 컴포넌트 //MyComponent.js const MyComponent = () => { return 나의 새롭고 멋진 컴포넌트; }; export default MyComponent; //다른 파일에서 이 파일을 import할 때, 위에서 선언한 MyComponent 클래스를 불러오도록 한다 () = > { } 화살표 함수 문법을 사용하여 함수를 만든다. ● 모듈 불러오기 App 컴포넌트에서 MyCom..