useState

useReducer로 useState 리팩터링 하기 (1)

원래 useState로 관리하던 사용자 기호들 중 작동 방식이 비슷한 도구들을 묶어 reducer로 관리하기로 했다. const [enterSymbol, setEnterSymbol] = useState([]); const [pauseSymbol, setPauseSymbol] = useState([]); const [mouseSymbol, setMouseSymbol] = useState([]); const [slashSymbol, setSlashSymbol] = useState([]); ... case 4: enterSymbol[selectedWordIdx] = true; setEnterSymbol([...enterSymbol]); break; case 5: pauseSymbol[selectedWordId..

useReducer

useReducer는 reducer를 사용할 수 있도록 하는 리액트 내장 훅이다. 현재 스피치의 스크립트를 편집하고 재생하는 컴포넌트에 너무 많은 상태들이 useState로 관리되고 있어서, 업데이트 로직이 비슷한 상태들을 reducer로 묶어보려고 한다. 그래서 우선 useState로 관리하던 상태들을 useReducer로 리팩터링하는 과정에 집중해서 알아볼 것이다. 상태를 업데이트 하는 로직을 하나의 함수로 컴포넌트와 분리할 수 있는데, 이것을 reducer라고 한다. reducer를 다른 파일로 분리해 사용할 수도 있으며 코드가 복잡해 질 수록 유용하다. useReducer는 reducer function과 initial state 두 개의 인자를 갖고, stateful value와 dispatch..

useState로 인스턴스 접근

아래 코드에서 wavesurfer 엘리먼트는 useRef로 컨테이너를 지정해서 그 안에 만들어졌다. const wavesurferRef = useRef(null); useEffect(() => { let wavesurfer = null; const initWaveSurfer = () => { wavesurfer = WaveSurfer.create({ container: wavesurferRef.current, ...optins }); ... }, []); return ( ... ... ); 이제 useEffect 바깥의 코드에서 파형에 접근해야 하는데 wavesurferRef.current에서 메서드를 호출했다가 막혔다. wavesurferRef.current.method() is not a functi..

React 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달

리액트를 사용하다 보면 컴포넌트 간에 데이터를 전달할 일이 많이 생긴다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때는 다음과 같이 props를 이용해 간단하게 전달할 수 있다. // 부모 -> 자식 예시 그러나 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 때는 useState로 setter를 설정해 setter를 전달해주는 일련의 과정이 필요하다. 과정은 다음과 같다. 부모 컴포넌트에서 useState를 통해 전달받을 데이터를 저장할 변수와 setter를 선언한다. 자식 컴포넌트에 props로 setter를 전달한다. 자식 컴포넌트에서는 props.setter를 이용해 데이터를 저장한다. // 부모 컴포넌트 // 자식 컴포넌트 ... onChange={(i) => props.setId(d..