- axios 라이브러리 : REST API(GET, PUT, POST, DELETE 등의 메서드 제공하는 API) 요청 제공하는 라이브러리 import React, { useEffect, useReducer } from 'react'; import axios from 'axios'; function reducer(state, action) { switch (action.type) { case 'LOADING': return { loading: true, data: null, error: null }; case 'SUCCESS': return { loading: false, data: action.data, error: null }; case 'ERROR': return { loading: false, ..

.Button { & + & { margin-left: 1rem; } } & + & 가 의미 하는 것은 .Button + .Button 입니다. 만약 함께 있다면 우측에 있는 버튼에 여백을 설정 한 것 - Template Literal : 문자열 조합을 더욱 쉽게 할 수 있게 해주는 ES6 문법 const name = 'react'; const message = `hello ${name}`; - Tagged Template Literal : 내부의 값을 조회하고 싶을 때 사용할 수 있는 문법, template literal 앞에 tag가 붙어있는 형식(여기서는 favoriteColors) const red = '빨간색'; const blue = '파란색'; function favoriteColors(te..

마운트 먼저 마운트될 때 발생하는 생명주기들을 알아봅시다. constructor : 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드 getDerivedStateFromProps : 다른 생명주기 메서드와는 달리 앞에 static 을 필요로 하고, 이 안에서는 this 롤 조회 할 수 없음, 특정 객체를 반환하게 되면 해당 객체 안에 있는 내용들이 컴포넌트의 state 로 설정(null은 반환 시 변화 없음), 컴포넌트의 props 나 state 가 바뀌었을때도 이 메서드가 호출 render : 컴포넌트를 렌더링하는 메서드 componentDidMount : 컴포넌트의 첫번째 렌더링이 마치고 나면 호출되는 메서드, 만든 컴포넌트가 화면에 나타난 상태, 해당 컴포넌트에서 필요로하는 데이터를 요청하기 위해 a..

- 클래스형 컴포넌트(함수형 컴포넌트와 Hooks 지원으로 현재는 잘 사용하지 않는 형태) - render() 메서드 필수, 렌더링하고 싶은 JSX 를 반환 - props 를 조회 해야 할 때에는 this.props 를 조회 - 클래스 내부에 종속된 함수인 메서드, 커스텀 메서드는 보통 이름을 handle... 으로 명명 - 메서드들을 이벤트로 등록하게 되는 과정에서 각 메서드와 컴포넌트 인스턴스의 관계가 끊겨버리기 때문에 조치 필요 1. 첫번째는 클래스의 생성자 메서드 constructor 에서 bind 작업(가장 일반적) class Counter extends Component { constructor(props) { super(props); this.handleIncrease = this.handl..

- Immer 라이브러리 : 불변성을 관리해주는 라이브러리, produce 함수를 import해 사용(성능 저하가 있긴 함) produce 함수의 파라미터 : 첫번째 - 수정하고 싶은 객체, 두번째 - 수정하기 위한 함수 1. 라이브러리 없이 복잡한 객체의 불변성 유지 const state = { posts: [ { id: 1, title: '제목입니다.', body: '내용입니다.', comments: [ { id: 1, text: '와 정말 잘 읽었습니다.' } ] }, { id: 2, title: '제목입니다.', body: '내용입니다.', comments: [ { id: 2, text: '또 다른 댓글 어쩌고 저쩌고' } ] } ], selectedId: 1 }; const nextState =..

- useContext : 특정 함수를 특정 컴포넌트를 거쳐서 원하는 컴포넌트에게 전달하는 작업을 간소화하기 위해 전역에서 접근 가능하게 제공함 1. context 생성하기 const UserDispatch = React.createContext(null); 2. context를 제공할 컴포넌트 감싸기 ... 3. useContext hooks이용해서 context 제공받은 children 컴포넌트에서 사용 import React, { useContext } from 'react'; import { UserDispatch } from './App'; const User = React.memo(function User({ user }) { const dispatch = useContext(UserDispa..