덕짱 블로그 덕짱 블로그

리액트에서는 useState hook을 사용하여 간편하게 상태관리를 할 수 있다. 하지만 상태를 변경하는 setState() 함수를 사용하다보면 직면하는 문제가 있는데, setState() 함수가 내가 원하는대로 동작하지 않는다는 것이였다. 상황) 사용자가 TodoList Item의 checkBox를 클릭하면, 서버에 TodoItem을 수정하는 PutTodo요청을 보내야 한다. 사용자가 checkbox Input을 클릭하면 setChecked로 상태를 변경하고, putTodo에 변경된 checked 상태를 담아서 요청을 보냈다. 예상한 흐름 = 클릭 -> 상태변경 -> 서버요청 그런데 이상하게 새로고침하면 상태가 이전으로 돌아가 있었다. 무슨일인가 싶어서 네트워크 탭을 보니 putTodo요청에는 setS..

1. 리엑트 컨텍스트(React-Contexst) 리덕스를 알아보기 전에 먼저 리엑트 컨텍스트(React-Contexst)를 알아보겠습니다. 컨텍스트는 컴포넌트간에 props를 일일이 전달하는 props drilling 현상 개선하기 위해 사용합니다. 리엑트 공식문서에는 아래와 같이 나와있습니다. 정리하자면, props를 전달할 때 부모에서 자식으로 전달해야하는 번거로움이 있는데, 이를 해결할 수 있는 것이 바로 리엑트 컨텍스트인 것입니다. 2. 리엑트 컨텍스트(React Context)의 단점 하지만 리엑트 컨텍스트는 두가지 단점이 존재합니다. 복잡한 설정과 관리 첫번째 단점은 리엑트 컨텍스트를 사용하면 설정이 아주 복잡해 질 수 있고, 상태관리가 복잡해질 수 있다는 것입니다. 그 복잡성은 구축하는..

useEffect란? useEffect() 함수는 React component가 렌더링 될 때마다 특정 작업(Sied effect)을 실행할 수 있도록 하는 리액트 Hook입니다. 여기서 Side effect는 component가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 뜻합니다. 이러한 기능으로 인해 함수형 컴포넌트에서도 클래스형 컴포넌트에서 사용했던 생명주기 메서드를 사용할 수 있게 되었습니다. Side Effect (부수 효과) 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기합니다. React에서는 컴포넌트 내에서 fetch를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM 직접 조작할 때 Side Effect가 ..

단방향 데이터 흐름이라는 원칙에 따라, 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태 혹은 타입이 무엇인지만 알 수 있습니다. 데이터가 state로부터 왔는지, 하드코딩으로 입력한 내용인지는 알지 못합니다. 그러므로 하위 컴포넌트에서의 어떤 이벤트로 인해 상위 컴포넌트의 상태가 바뀌는 것은 마치 "역방향 데이터 흐름"과 같이 조금 이상하게 들릴 수 있습니다. React가 제시하는 해결책은 다음과 같습니다. 상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다 여전히 단방향 데이터 흐름의 원칙에 부합하는 해결 방법입니다. 바로 이것이 "상태 끌어올리기" 입니다. //상위 컴포넌트 function messageBoard() { cons..