WEB/React

[React - Trouble Shooting] state 값이 변경되지 않는 문제

이번 포스트에서는 state와 setState는 간단하게만 보고 넘어가자. 배경 지식 state state 값은 setState()를 통해서만 변경이 가능하다. setState useState로 만든 useState는 비동기적 특성을 갖는다!! 문제점 useEffect 훅 안에서 이벤트 리스너가 실행되면서 state 값이 변했다. 이 state 값이 의존성배열에 들어가있는 다른 useEffect 훅을 실행시켜 state 값을 확인해보면 값이 잘 나온다. 하지만 이벤트 리스너의 처리가 모두 끝나지 않았고, 변한 state 값을 통해 다른 로직이 실행되도록 구현되어 있었다. 여기서 문제가 발생한다!! 원인 앞서 말했듯이 React의 setState는 비동기적으로 실행된다. 정확히는 현재 setState는 이..

[React - Trouble Shooting] 불필요한 렌더링으로 인한 문제

하나의 페이지에 속해있는 컴포넌트에서 서버에 소켓 통신을 보내는 코드를 구현했다. 하지만 서버에 한 번의 소켓 연결이 이루어지는 것이 아니라 여러번의 연결이 이루어졌다. 불필요한 렌더링이 일어난 것이다. 이렇게 연결이 여러번 이루어지면서 서버에서는 여러 클라이언트가 연결되었다는 것으로 인식한다. 어떻게 해결할 수 있을까? 렌더링 자체를 제어할 수 있는 방법도 있지만 이번에는 그런 방법이 아니다. useEffect 훅을 사용할 수 있다. useEffect(() => { // 부수 효과 작업을 수행하는 콜백 함수 // ... return () => { // 정리(clean-up) 함수 // 컴포넌트가 언마운트되거나 의존성이 변경될 때 호출됨 // ... }; }, [/* 의존성 배열 */]); 의존성 배열 ..

[React] map 함수

map() 함수란? 반복되는 컴포넌트를 렌더링하기 위해 사용하는 함수. const days = ["Mon", "Tue", "Wed"]; const goodDay = dyas.map(day => '${day}); console.log(goodDay); "Mon" "Tue" "Wed" 이렇게 출력된다. map()은 배열의 요소 하나씩 뽑은 뒤 결과값을 보여준다. 이뿐만 아니라 map 함수의 파라미터값으로 콜백 함수가 들어가게 되는데, 그 안에 변수를 순서대로 현재 처리하고 있는 요소, 현재 처리하고 있는 요소의 index 값, 현재 처리하고 있는 원본 배열 로 입력된다. 하나의 변수만 놓는다면 현재 처리하고 있는 요소의 값만을 사용하게 된다. Callback 함수란 다른 코드의 인수로서 넘겨주는 실행 가능한..

[React] spread 연산자

spread는 펼치다 라는 뜻이 있다. 그 뜻과 같이 spread 문법을 사용하면 객체 혹은 배열을 펼쳐 사용할 수 있다. const [inputs, setInputs] = useState({ name: "", email: "", tel: "" }); 이렇게 useState를 이용해 값을 저장한 객체가 있고 이 객체의 값을 변경하기를 원할 때 클라이언트에서 입력받은 value 값과 태그의 id 값을 통해 const onChange = (e) => { const value = e.target.value; const id = e.target.id; setInputs({ ...inputs, [id]: value }) }; 위와같이 set 함수를 사용하여 값을 변경해주었는데 그 내부에서는 spread 연산자를 ..