coding/react17 리코일, Selectors atoms, selectors를 입력으로 받아들이는 순수 함수다. 상위 atoms, selectors가 업데이트되면 하위의 selector 함수도 다시 실행된다. 컴포넌트들은 selectors를 atoms처럼 구독할 수 있으며 selectors가 변경되면 컴포넌트들도 다시 렌더링된다. const fontSizeLabelState = selector({ key: 'fontSizeLabelState', get: ({get}) => { const fontSize = get(fontSizeState); // atom에 의존성이 생김 const unit = 'px'; return `${fontSize}${unit}`; }, }); get속성은 계산될 함수다. 전달되는 get 인자를 통해 atoms와 다른 sele.. 2023. 3. 30. 리코일, Atoms Atoms Atoms는 상태의 단위이며, 업데이트와 구독이 가능. atom이 업데이트되면 각각의 구독된 컴포넌트는 새로운 값을 반영해 재렌더링된다. atoms는 런타임에서 생성될 수도 있다. Atoms는 리액트의 로컬 컴포넌트의 상태 대신 사용할 수 있다. 동일한 atom이 여러 컴포넌트에서 사용되는 경우 모든 컴포넌트는 상태를 공유한다. const fontSizeState = atom({ key: 'fontSizeState', default: 14, }) Atoms는 디버깅, 지속성 및 모든 atoms의 map을 볼 수 있는 특정 고급 API에 사용되는 고유한 키가 필요하다. 두개의 atom이 같은 키를 갖는 것은 오류이기 때문에 키 값은 전역적으로 고유하도록 해야한다. 리액트 컴포넌트의 상태처럼 기본.. 2023. 3. 30. 버튼 애니메이션 1 with styled-component See the Pen Submit button animation by Tom (@yeptony) on CodePen. import React from 'react'; import { View, Display, Text } from '@pip/theme'; import DefaultLayout from '../../layouts/Default'; import styled, { css, keyframes } from 'styled-components'; const Payment = () => { const [ani, setAni] = React.useState({ click: false, circle: false }); const handleClick = () => { setAni({ ...ani, clic.. 2022. 5. 20. async-await function in useEffect useEffect는 일반적으로 리액트에서 데이터 가져오기가 일어나는 곳이다. 데이터 가져오기는 비동기 함수를 사용하는 것을 의미하고 useEffect를 사용하는 것은 생각만큼 간단하지 않을 수 있다. 잘못된 방법 useEffect에서 데이터 가져오기 수행하는 잘못된 방법 한가지: ... // ❌ 이렇게 하지 마세요 useEffect(async () => { const data = await fetchData(); }, [fetchData]) ...리턴하는 데이터가 소리를 지르는 코드가 될 것이다. 여기서 문제는 useEffect의 첫번째 인수가 아무것도 반환하지 않거나(정의되지 않음) 함수를 반환하는 함수여야 하는데, 비동기 함수는 함수로 호출할 수 없는 Promise를 반환한다. useEffect 후크.. 2022. 2. 22. 이전 1 2 3 4 5 다음
