테라시아의 웹개발일기

Redux - 상태 관리 라이브러리이며, 리액트 뿐만 아니라 모든 JS코드에서 작동된다. - Flux 패턴을 기반으로 생성되었기 때문에 단방향으로 동작하여 흐름을 파악하기 쉽고 예측하기 쉽다. 1. 컴포넌트(Component) - Action이 발생한다. - 나중에 변경된 state를 반영하기 위하여 Store가 subscribe(구독)을 해놓는다. 2. 액션(Action) - 변화가 필요할 때 발생시키는 신호 - Dispatch() 감싸서 전달하면 Reducer가 받아서 해당 분기를 실행한다. - Action에는 Type(구분점)을 필수로 담고 데이터(파라미터)를 같이 담아서 들고간다. Payload라고 한다. - 이후 리듀서에 전달되기 전에 Store에서 state를 가져와 Action과 함께 리듀서..

Context api - 리액트에서 내장 API(16.2버전)중 하나로 Props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있도록 도와주는 API Props의 드릴링 - A.jsx ~ Z.jsx 까지 있다고 가정할 때 부모 컴포넌트 A부터 최하위 컴포넌트 Z까지 Props를 전달하는 과정을 Props의 드릴링이라고 한다. Context Api의 사용 - 변화가 없는 것, 즉 다크모드, 화이트 모드 등 값이 선언되어있는 상태로 변화가 없는 상태의 변수를 지정하는 경우에만 사용된다. - context는 변화를 시켜주는 api가 아니다. - 변화를 주면 안되지만 혹시나 변화가 생길 것을 대비하여 변화까지 생각해서 만들어 놓았다. - redux는 context와 변화(action)를 합쳐서 변..

custom hook 패턴 구조 // 참조 [components] [utils] - arrayheler.js - parseheler.js [const] - key.js (상수, 문자열) [styles] - theme.js - globalStyle.js - common.js ... [pages] [Home] [Hooks] [Components] -home.js [routes] [hooks] ... etc ☆ Codeimport React from 'react';import S from '../style';const StyledComponent01 = () => { return ( 스타일된 컴포넌트입니다. ..

1. useMemo - 리엑트에서 컴포넌트의 성능을 최적화하는데 사용하는 훅함수이다. - 사이드 이팩트가 발생하는 변수를 담아서 사용한다. - memoization된 값을 반환하는 useMemo는 특정 결과값을 재사용할 때 사용한다. 2. useCallback - memoization된 콜백 함수, 즉 이미 생성된 함수를 반환하는 리엑트의 훅함수이다. - 실행할 문장 또는 변화를 주는 기능을 제어하기 위해 사용한다. - 의존성 배열 값의 변화가 있을 때 콜백 함수를 새로 생성하고, 그렇지 않을 경우 콜백함수를 생성하지 않는다.☆ Codeimport React, { useCallback, useMemo, useState } from 'react';import Amount from './Amount';con..

1. Side-Effect     - 함수 내 특정 동작이 함수 외부에 영향을 끼쳐, 프로그램 동작을 이해하기 어렵게 만드는 행위     - settimeout, setinterval         - 예측하기 어려운 함수, 종료 후 시점에서 어떤 작업을 하고 싶을 때     - 서버 통신(fetch) 로 통신을 할 때         - 사용자가 요청했을 때 이후 또는 직전에 어떤 작업을 하고 싶을 경우 2. useEffect     - Side-Effect를 따로 관리하여 컴포넌트가 최대한 순수 함수를 유지할 수 있도록 도와주는 함수     - useEffect()는 랜더링이 모두 끝난 다음에 실행된다.     가용 범위는?     - 랜더링 될 때 마다 실행     > useEffect(()=>{})..

리액트 라이프사이클     페이지에 컴포넌트가 생성되고, 수정되고, 사라지는 순서를 의미한다.     React 에서 클래스 컴포넌트를 사용하면, 9개의 메서드를 통해 작업의 흐름을 제어할 수 있다.     - 전체적인 흐름     마운트 -> 업데이트 -> 언마운트 마운트(Mount)     페이지에 컴포넌트가 나타나는 것     - constructor : 새로운 컴포넌트를 생성할 때 마다 자동으로 실행되는 특별한 메서드     - getDerivedStateFromPorps : prop를 state에 넣을 때 사용한다. 컴포넌트와 마운트 될 때 와 업데이트 될 때 실행된다.     - render : 준비해놓은 UI를 랜더링할 때 사용된다.     - componentDidMount : 페이지에 컴..

한글 음식명, 영어 음식명을 입력하여 추가 버튼을 누르면 아래 결과에서 한글 음식명(영어 음식명)으로 표현하는 리스트 구현 리스트에서 체크박스로 삭제 버튼을 누르면 해당 리스트가 삭제 ☆ Codeimport React, { useRef, useState } from 'react';const FoodContainer = () => { const style = { listStyle : "none" }; const inputRef = useRef([]) const [foods, setFoods] = useState([]); const [checked, setChecked] = useState([]); const foodList = foods.map(({kor, eng}, i) => ..

리엑트에서 레퍼런스를 통해서 내가 원하는 태그에 접근하여 값을 넣거나 할 수 있다. ☆ Codeimport React, { useRef } from 'react';const Check = () => { const inputRef = useRef([]); const formRef = useRef(); const onClickToCheck = () => { for(let input of inputRef.current){ if(!input.value){ console.log(input.name + "error") return } } formRef.current.su..

React에서는 state를 통해 간접적으로 변수, 상태를 변화시킨다. ☆ Codeimport React,{ useState } from 'react';const Count = () => { const [number, setNumber] = useState(0) const increase = () => { setNumber(number + 1) } const decrease = () => { setNumber(number - 1) } return ( 감소 {number} 증가 );};export default Count;

리액트에서는 변화를 감지하여 랜더링을 하기 때문에, 기존 자바스크립트에서 쓰던 forEach대신 새로운 배열을 반환하는map함수를 사용하게 된다. ☆ Code ★ Food.jsximport React from 'react';const Food = ({food}) => { const {id, name} = food; return ( {id}, {name} );};export default Food; ★ FoodContainer.jsimport React from 'react';import Food from './Food';const FoodContainer = () => { const style = { listStyle : ..