이제껏 component를 제작할 때, 함수형 component만을 사용했었다. React에서는 함수형이 아닌 다른 방법으로 component를 빌드할 수 있다. React hook에서도 잠깐 다뤘지만, Class를 이용해서 component를 제작할 수 있다. 물론, hook이 도입된 이후로 React project에서는 거의 이 방법을 사용하지 않는다. 따라서, 이부분은 생략을 해도 무관하지만 아직 여전히 많은 third party library나 이미 제작된 project에서 볼 가능성이 있다. Functional Components그 전에 이제까지 배웠던 함수형 component에 대해서 정리하고 넘어가자.function Product(props) { return A Product! ;}// o..
이미 여럿 살펴보았기에 알만한 내용이지만 React에서의 state는 매우 중요한 개념이다. state라는 것은 component를 다시 렌더링하고 화면에 표시되는 것을 바꾼다. 이번에 다룰 것은 React가 어떻게 state를 업데이트하는지에 대해 알아보고자 한다. Scheduled State 이제껏 배운 내용은 component 안에 useState() hook을 이용해 일부 상태들을 관리할 수 있었다. 'DVD' 값을 가진 product라는 state를 DVD에서 Book으로 state를 변경한다고 해보자. 그동안 살펴보면서 setNewProduct('Book') ;과 같이 업데이트 함수를 통해 state를 갱신했었다. 여기서 살펴봐야하는 부분은 setNewProduct('Book') ;이 실행되어..
이전 시간에 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를 사용하는 이유를..
