이전 시간에 React의 동작 원리에 대해서 잠깐 다뤘었다. React 작동 방식 How Does React Work? 먼저 React가 어떻게 동작하는지 알아보자. React는 이전에도 언급했듯이 사용자 interface를 구축하기 위한 JavaScript library이다. 이는 절대 변하지 않는 React의 핵심 개념으로 구축하기 coding-leaf.tistory.com component를 재렌더링하는 과정에서 불필요하게 자식 component까지 포함시킨다고 이야기했었다. 작은 단위의 project라면 큰 상관이 없겠지만 더 큰 어플리케이션이라면 좀 더 최적화가 필요할 수 있다. 따라서 개발자는 특정한 상황일 경우에만 재실행하도록 지시할 수 있어야 할 것이다. 이번 시간에는 그 방법에 대해서 알..
How Does React Work? 먼저 React가 어떻게 동작하는지 알아보자. React는 이전에도 언급했듯이 사용자 interface를 구축하기 위한 JavaScript library이다. 이는 절대 변하지 않는 React의 핵심 개념으로 구축하기 위해서 component를 사용한다. React가 component 개념을 통해 사용자 interface를 효과적으로 구성하며 이에 대한 업데이트 역시 component를 통해 진행된다. 이 과정에서 ReactDOM이라는 것이 나오는데 이는 웹에 대한 interface를 다루는 것이다. React는 사실 웹을 모른다. 브라우저와 전혀 관계가 없다. 어떻게 component를 다루는지는 알고 있지만 이러한 component에 HTML 요소들이 포함되어 있..
명령형 상호 작용 이번에 다뤄볼 내용은 상위 component와 명령형으로 상호 작용할 수 있는 방법에 대해서 다뤄보고자 한다. 즉, 어떤 state를 전달해서 상위 component에서 무언가를 변경하는 방식이 아니라 하위 component 내부에서 함수를 호출하는 방식이다. 물론, 명령형 접근 방식은 일반적인 React 패턴에 반하는 행위이기 때문에 자주 사용할 필요도 없겠지만 자주 사용해서도 안될 것이다. 여기서 일반적인 React 패턴은 선언형 접근 방식을 말하는 것으로, 기존에 JavaScript로 세세하게 작성해야했던 코드들을 React를 사용함으로써 해결할 수 있었다. 다시 말해, 명령형 접근 방식을 사용한다는 것은 JavaScript로 코딩한다는 것을 의미하며, React를 사용하는 이유를..
이번 시간엔 앞서서 미리 봤었던, React hook에 대해서 살펴보자. 해당 문서는 전반적으로 React 공식 문서를 정리한 글이다. Hook이란? Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수다. Hook은 class 안에서는 동작하지 않고 기존에 Class component에서 class 없이 React를 사용할 수 있게 해준다. React에서 제공하는 내장 hook은 단순히 "use"로 시작하는 모든 함수를 말한다. Motivation of Hook React에서 Hook이 나오게 된 계기는 다음과 같다. Component 사이에서 state 로직을 재사용하기 어렵다. 복잡한 compone..
Definition of Context API 이번 시간에는 더 큰 React 어플리케이션에서 마주칠 수 있는 다른 문제들에 대해서 알아보자. 해당 문제는 props를 통해 많은 component를 거쳐 많은 데이터를 전달할 때 발생한다. 이제까지 각 componenet에서 데이터를 상위, 하위의 데이터를 받아오는 방법을 배웠다. Props Chains 아래의 시나리오 구조를 살펴보자. 해당 어플리케이션은 로그인 기능이 있으며, 쇼핑몰처럼 물건을 선택해서 카트에 저장할 수 있다. 로그인에 대한 정보는 LoginForm component에서 사용자로 받아와서 state 형태로 저장될 것이다. 그 정보는 Shop과 Cart에서 사용되기에 전달해줘야한다. 하지만 데이터가 필요할 수도 있는 다른 componen..
