인생은 반복문

정의: 리액트 컴포넌트 여러 개가 같은 값을 바라보며 동일하게 갱신되어야하는 경우, 제일 가까운 공통 부모 컴포넌트로 state를 끌어올린다. 이것을 "state lifting up"라고 한다. 깨달음: 컴포넌트를 설계할 때 필요한 데이터를 prop으로 받을 지 state로 정의할 지 고민을 하게 되는 경우가 잦았는데, 결정의 근거로 state lifting up 가능성을 고려해야겠다. state vs prop 고민에서 선택의 근거가 좀 더 명확해질거 같다. "편하게 넘겨주는거 쓰는게 좋으니까 prop으로 결정하자! => 주변 컴포넌트와의 관계를 봤을 때 state lifting up을 가능성이 매우 높으니 prop으로 전달받자!"

쭉 읽어보니 평소에 useEffect를 사용할 때 놓쳤던 부분들을 많이 발견할 수 있었습니다. 친절하게도 마지막에 다시 한 번 wrap 해주는 부분이 있어서 원문으로 가져왔습니다. 아래에 원문을 의역해서 다시 정리해보았습니다. 원문 Unlike events, effects are caused by rendering itself rather than a particular interaction. Effects let you synchronize a component with some external system (third-party API, network, etc). By default, effects run after every render (including the initial one). React..

*fact 기반이 아닌 개인적인 생각 정리 글입니다. 이 점 참고해주세요. 1. Relay를 활용하면 Suspense를 사용할 수 있게 됩니다. 즉, 컴포넌트 내부에서는 data fetch에 대한 비동기 상황은 고려하지 않고 코드를 짤 수 있게 된다는 것이죠. 외부에 비동기 상황에서의 대처를 위임할 수 있게 되니까요. 2. Suspense는 React-Query, SWR 등에서도 사용 가능합니다. 그렇다면 Suspense 이외에서 Relay의 장점은 무엇일까요? 바로 선언적인 data fetching이 가능하다는 것입니다. Relay를 통해 데이터 fetching을 하려면 컴포넌트 내부에서 query를 적어야합니다. 이때 이 query 내용에 해당 컴포넌트가 필요한 데이터를 '명시'하는 방식입니다. 정리..

*해당 포스팅의 내용은 문서에 기반한 fact가 아닌, 개인의 생각 정리를 위한 글이므로 이 글을 읽으시는 분들은 이 점 유의해주세요. 다룰 내용 정리: 리액트를 사용하는 이유 1. VS 바닐라 JS 2. VS 다른 프레임워크 1. VS 바닐라 JS 바닐라 JS에서 화면을 수정하려면 1. 관련 데이터 수정하기, 2. 관련 DOM 수정하기 를 해줘야 합니다. 반면 리액트는 화면을 수정하려면 화면과 관련된 데이터(state)만 갱신해주면 됩니다. (화면 갱신은 React가 알아서 해줌) 바닐라 JS의 경우 DOM을 수정하는 작업까지도 절차적으로 직접 해줘야 하는 영역이었는데 반면 리액트에서는 View와 연관된 데이터만 바꾸면 그 데이터가 끼어있는 영역의 View가 알아서 알아서 바뀐다는 점에서 선언적인 느낌..