Frontend

두 컴포넌트의 상태값을 공유해야한다면? 두 컴포넌트의 부모로 State를 올림 그리고 Props를 두 컴포넌트로 각각 전달 ->Prop Drilling이 발생해서 비효율적임 - AppCount 예시 여러 컴포넌트들이 필요하다면 어플리케이션 전반적으로 필요한 경우 Context API를 사용할 수 있다. 언어, 테마(다크모드), 로그인/로그아웃여부 등등... 주의해야될 사항은 Context API우산으로 감싸진 부모, 자식들중 어느 하나라도 상태가 변경된다면 re-rendering이 되기때문에 빈번히 변경되야할 사항에는 Context API를 적용하지 않거나, Umbllera 테크닉을 사용하는 것이 좋다. Context API 사용예제 DarkModeContext.jsx import { createCont..

Uncontrolled-Component React에서는 모든 UI의 업데이트는 상태의 변경으로부터 발생해야 한다. 그런데, 와 같은 입력form은 React내부적으로 상태변경이 이루어지지않았음에도 불구하고 UI상으로 업데이트가 되는 것을 알 수 있다. 이것을 Uncontrolled-Component라고 한다. 이러한 Uncontrolled-Component를 제어해 Controlled-Component로 만들어주는 것이 중요하다. Controlled-Component 예제 import React, { useState } from 'react'; export default function AppForm() { const [form, setFrom] = useState({ name: '', email: '..

Uncontrolled-Component React에서는 모든 UI의 업데이트는 상태의 변경으로부터 발생해야 한다. 그런데, 와 같은 입력form은 React내부적으로 상태변경이 이루어지지않았음에도 불구하고 UI상으로 업데이트가 되는 것을 알 수 있다. 이것을 Uncontrolled-Component라고 한다. 이러한 Uncontrolled-Component를 제어해 Controlled-Component로 만들어주는 것이 중요하다. Controlled-Component 예제 import React, { useState } from 'react'; export default function AppForm() { const [form, setFrom] = useState({ name: '', email: '..

useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기 useEffect 라는 Hook 을 사용하여 컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때 (사라질 때), 그리고 업데이트 될 때 (특정 props가 바뀔 때) 특정 작업을 처리할 수 있다. 마운트 / 언마운트 UserList.js import React, { useEffect } from 'react'; function User({ user, onRemove, onToggle }) { useEffect(() => { console.log('컴포넌트가 화면에 나타남'); return () => { console.log('컴포넌트가 화면에서 사라짐'); }; }, []); return ( onToggle(user..

Promise The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value. Promise가 왜 필요한거지? 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 아래와 같은 API를 사용하게 되는데, $.get('url 주소/products/1', function(response) { // ... }); 위 API가 실행되면 서버에다가 ‘데이터 하나 보내주세요’ 라는 요청을 보낸다. 그런데 여기서 데이터를 받아오기도 전에 마치 데이터를 다 받아온 것 마냥 ..

Immer사용방법 터미널에서 Immer 다운로드 yarn add immer use-immer 코드내부 모듈 import 해주기 import { useImmer } from 'use-immer'; Immer로 작성한 코드 import React, { useState } from 'react'; import { useImmer } from 'use-immer'; export default function AppMentorsImmer() { const [person, updatePerson] = useImmer(initialPerson); const handleUpdate = () => { const prev = prompt(`누구의 이름을 바꾸고 싶은가요?`); const current = prompt(`이..

구조분해할당 useReducer의 개념 상태를 관리하게 될 때 useState 를 사용하는것 말고도 다른 방법이 있다. 바로 useReducer 라는 Hook을 사용하는것인데, 이 Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. 상태 업데이트 로직을 컴포넌트 바깥에 작성 할 수도 있고, 심지어 다른 파일에 작성 후 불러와서 사용 할 수도 있다. 즉, 다른 컴포넌트에서도 재사용을 하기위해 로직을 따로 정의할 수 있어, 유지보수에 유리하고 간결한 코드를 내보일 수 있다는 장점이 있다. useReducer의 사용방법 const [state, dispatch] = useReducer(reducer, initialState); useReducer 에 넣는 첫번째 파라미터는..

얻게된 것 React에 대한 기본, 심화개념 Redux개념 다음주 계획 프로젝트전 사이드프로젝트 진행하면서 React이해도 높이기