DDODI TIL 🚀

Vanilla Javascript로 웹 컴포넌트 만들기 | 개발자 황준일 위 글을 읽다가 한 가지 의문이 생겼다. 이제는 직접적으로 DOM을 다루는 행위가 급격하게 감소했고, 상태(State) 를 기준으로 DOM을 렌더링 하는 형태로 발전한 것이다. DOM이 변하는 경우가 State에 종속 되어버린 것이다. 반대로 말하면, State가 변하지 않을 경우 DOM이 변하면 안 되는 것이다. 이 글은 DOM 요소에 직접 접근하는 것과 state에 따라 DOM을 렌더링하는 것을 서로 대척점에 있는 반대 개념으로 소개하고 있다. 난 이 두 가지가 어째서 반대 개념이 되는 것인지 이해가 잘 되지 않았다. state에 따라 DOM을 렌더링하는 아래 코드에서도, innerHTML API를 사용해 DOM에 접근하지 않나..

👩🏻‍💻 언제 사용하나요? ✅ React Component Tree의 서로 다른 부분에서 동일한 데이터를 필요로 할 때 위 상황에서 보통은 props를 사용해 데이터를 전달하게 됩니다. 그런데 컴포넌트 간의 거리가 먼 경우, 특정 컴포넌트로 데이터를 전달하기 위해 여러 개의 컴포넌트를 거쳐야 하는 상황이 발생합니다. A | B | C | D 위와 같은 구조로 이뤄진 React Component Tree를 가정해봅시다. A: useState로 데이터를 관리하는 컴포넌트 D: A의 데이터를 바탕으로 UI를 그리는 컴포넌트 라고 가정했을 때, D에게 A의 데이터를 넘겨주려면 어떻게 해야 할까요? B,C가 props로 부모 컴포넌트(각각 A,B)로부터 데이터를 전달 받고, 다시 자식 컴포넌트(각각 C,D)에게 ..

https://beta.reactjs.org/learn/synchronizing-with-effects 위 글을 제가 이해한 바대로 정리한 내용입니당 ‘٩꒰｡•◡•｡꒱۶’ React Docs BETA 라는 사이트인데, 기존 공식 문서보다 훨씬 이해하기 쉽고 친절하게 잘 되어 있어 React의 기본 원리를 이해하기에 좋습니다! React를 대강 쓸 줄은 아는데 깊이가 부족하다고 느껴지시는 분들에게 추천합니당 왕 추천 ❤️‍🔥 👩🏻‍💻 Effect란? two types of logic inside React components Rendering code: describes the UI, must be pure Event handlers: caused by a specific user action Effect..