React/Concept

[ React ] Props

⚪ 컴포넌트에 추가한 argument들은 컴포넌트에 Object로 전달되며, 이를 Destructing 하여 원하는 속성만 적을 수 있다. ⚪ 부모 컴포넌트의 어떠한 state 변화가 생기면 자식 컴포넌트들은 모두 리렌더링된다. ⚪ 따라서, props가 변하지 않는 컴포넌트까지 모두 리렌더링되며, 이는 성능 저하의 원인이 될 수 있다. ⚪ 이를 방지하기 위하여 memo를 사용하여 리렌더링 할 필요가 없는 컴포넌트들을 최적화시킬 수 있다. ⚪ 리액트 js는 컴포넌트 타입에 대해 오류를 출력하지 않는다. 따라서, prop-types 라이브러리를 통해서 타입과 필요성을 명시할 수 있다. const Btn = ({ text, fontSize }) => { return ( {text} ); } const Memo..

[ React ] 웹 소켓 통신 + Web Audio API

🔴 TTS ⚪ 시나리오 🔔 TTS 테스트를 진행하고 싶은 텍스트를 입력한 후 서버로 전송한다. 🔔 서버에서 일정 chunk 단위로 나눠서 입력한 텍스트에 맞는 음성 Raw 데이터가 웹 소켓 통신으로 도착한다. 🔔 음성 데이터를 버퍼에 저장한 후 오디오로 재생시킨다. ⚪ 코드 const TtsScreen = () => { const inputText = useSelector(state => state.tts.inputText); const isPlaying = useSelector(state => state.tts.isPlaying); const dispatch = useDispatch(); // recorder const [player] = useState(() => new Player()); const..

[ React ] Hook

🔴 useState const [ state, setState ] = useState(0); // 변수 선언 // setState 함수의 첫 번째 argument는 현재 state 값이다. setState((current) => current + 1); // 값 변경(비동기) + 렌더링 state = state + 1; // 값 변경(비동기) // 🔍 state 값을 변경하는 방법 const [fruit, setFruit] = useState({ color: "red", name: "apple" }); // 1️⃣ 새로운 객체 만들기 setFruit({ color: "red", name: "strawberry" }); // 2️⃣ prevState 값을 이용하여 이전 state를 사용하기 setFruit..