공부 || 정리/React
[React] context API로 전역 상태 관리하기
[React] context API로 전역 상태 관리하기
2021.09.15Context API Context API의 Context는 컴포넌트의 단계마다 Props를 일일이 전달하지 않고, 원하는 컴포넌트 트리에 데이터를 제공할 수 있는 State Management 툴입니다. React는 데이터를 상위에서 하위 컴포넌트로 Props를 전달하는 구조입니다. 그래서 구현된 컴포넌트 트리에 컴포넌트 개수가 많아질 경우에는 데이터를 전달하는 과정이 복잡해질 수 있습니다. Context API를 이용하면 각 컴포넌트마다 데이터를 파라미터로 받거나 하위 컴포넌트에 데이터를 전달하는 과정이 생략됩니다. 즉, 이러한 관리를 전역적으로 상태를 관리한다고 말할 수 있습니다. Context API에는 Provider, createContext, Consumer의 개념이 있습니다. 이들의 개념만..
[React] useState
[React] useState
2021.07.21useState React의 hooks중 하나입니다. 상태를 동적으로 관리할 때 사용합니다. 예제를 통해서 useState를 알아보겠습니다. App.js import React from "react"; import Counter from "./Counter"; function App() { return ; } export default App; Counter.js import React, { useState } from "react"; function Counter() { const [number, setNumber] = useState(0); // (1) const onIncrease = () => { setNumber(number + 1); }; const onDecrease = () => { set..
[React] useReducer / 커스텀 Hook 만들기
[React] useReducer / 커스텀 Hook 만들기
2021.04.16useReducer - 기초 상태를 업데이트할 때에는 useState를 사용해서 새로운 상태를 설정해주었습니다. 하지만 useState 말고 또 다른 방법이 있습니다. useReducer Hook 함수입니다. 이 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있습니다. 상태 업데이트 로직을 컴포넌트 바깥에 작성할 수 있고, 다른 파일에 작성 후 불러와서 사용할 수도 있습니다. reducer : 상태를 업데이트하는 함수입니다. 즉, 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수입니다. function reducer(state, action) { // 새로운 상태를 만드는 로직 switch (action.type) { case 'INCREMENT' : ..
[React] useMemo / useCallback / React.memo
[React] useMemo / useCallback / React.memo
2021.04.11useMemo useMemo Hook은 성능 최적화를 위하여 사용됩니다. 사실 useMemo 함수를 알기 전에 메모이제이션(memoization) 개념을 알고 있으면 좋습니다. 간단하게 설명하고 넘어가겠습니다. 메모이제이션이란 기존에 수행한 연산의 결과값을 변수나 어딘가에 저장하고 동일한 입력이나 행동이 들어올 경우 그 값을 재활용하는 프로그래밍 기법을 말합니다. 이를 잘 활용하면, 중복 연산을 피할 수 있고 애플리케이션의 성능을 최적화시킬 수 있습니다. 이 메모이제이션 개념이 들어간 로직을 간편하게 사용할 수 있게끔 해주는 것이 useMemo hook입니다. useMemo 함수는 2개의 인자를 받습니다. 1. 결과값을 생성해주는 함수 2. 기존의 결과값을 재활용 여부의 기준이 되는 기존 배열 즉, 어떤..
[React] 배열 항목 제거, 수정 / useEffect
[React] 배열 항목 제거, 수정 / useEffect
2021.04.09배열에 항목 제거하기 배열에 항목을 제거할 때에는 어떻게 해야 하는지 알아보겠습니다. 먼저, UserList에서 각 User 컴포넌트를 보여줄 때, 삭제 버튼을 렌더링 하겠습니다. UserList.js import React from "react"; function User({ user, onRemove }) { const {username, email, id} = user; return ( {username} ({email}) onRemove(id)}>삭제 ); } function UserList({ users, onRemove }) { return ( {users.map((user) => ( ))} ); } export default UserList; 결과 화면 User 컴포넌트의 삭제 버튼이 클릭될..
[React] 배열 렌더링 / useRef 활용 / 배열에 항목 추가
[React] 배열 렌더링 / useRef 활용 / 배열에 항목 추가
2021.04.04배열 렌더링하기 리액트에서 배열을 렌더링하는 방법을 알아보겠습니다. sample.js const users = [ { id: 1, username: 'velopert', email: 'public.velopert@gmail.com' }, { id: 2, username: 'tester', email: 'tester@example.com' }, { id: 3, username: 'liz', email: 'liz@example.com' } ]; 만약에 이 내용을 컴포넌트로 렌더링한다면 가장 기본적인 방법으로 비효율적이지만, 그냥 그대로 코드를 작성하는 것 입니다. UserList.js import React from 'react'; function User({ user }) { return ( {user.u..
[React] input 상태 관리하기 / 여러개의 input 상태 관리하기 / useRef
[React] input 상태 관리하기 / 여러개의 input 상태 관리하기 / useRef
2021.04.03input 상태 관리하기 간단하게 React에서 Input 태그 안의 상태를 관리하는 법을 알아보겠습니다. 먼저 결과 코드입니다. App.js import React from "react"; import InputSample from "./InputSample"; function App() { return ; } export default App; InputSample.js import React, { useState } from "react"; function InputSample() { const [text, setText] = useState(""); const onChange = (e) => { setText(e.target.value); }; const onReset = () => { setTe..
[React] props / 조건부 렌더링
[React] props / 조건부 렌더링
2021.03.27props를 통해 컴포넌트에게 값 전달하기 props는 propreties의 줄임말입니다. 주로 부모 컴포넌트에서 자식 컴포넌트로 특정 값을 전달할 때 사용합니다. App.js (부모) import React from "react"; import Hello from "./Hello"; function App() { return ( ); } export default App; Hello.js (자식) import React from "react"; function Hello() { return 안녕하세요! } export default Hello; 초기 구성 코드입니다. 화면에는 "안녕하세요!" 가 렌더링 될 것입니다. 부모 컴포넌트는 App.js이고 자식 컴포넌트는 Hello.js입니다. 부모 컴포넌트에..
[React] 리액트는 어쩌다가 만들어졌을까? / 리액트 컴포넌트 / JSX
[React] 리액트는 어쩌다가 만들어졌을까? / 리액트 컴포넌트 / JSX
2021.03.24리액트는 어쩌다가 만들어졌을까? JavaScript를 사용하여 DOM을 변형하기 위해서는 브라우저의 DOM select API를 사용하여 특정 DOM을 선택한 뒤에 특정 이벤트가 발생하면 변화를 주는 작업을 해야 합니다. 참고로 DOM에 대한 설명은 bbangson.tistory.com/62 이 링크에 있습니다. [JavaScript] 실습 - 카운터 만들기 / 모달 만들기 카운터 만들기 "간단한 카운터 만들기" 실습을 해보겠습니다. 왼쪽 +1 버튼을 누르면 위에 있는 숫자가 올라가고, 오른쪽 -1 버튼을 누르면 숫자가 내려가는 실습입니다. 숫자의 초기 값은 0으로 bbangson.tistory.com 즉, 브라우저의 DOM을 선택하고 이벤트를 걸어주는 규칙을 이용해서 DOM을 변형시켜줘야 합니다. 작은..