![]()
이전 글에 이어서, 이번에는 React의 Core Conept들과 이를 어떻게 이용하고 있는지 알아보자. React의 Core Concepts Components Props State Components 아래 사진 처럼 유저 인터페이스는 작은 단위의 블락(so called Components)로 쪼갤 수 있다. 이러한 모듈성은, 컴포넌트를 추가, 수정, 삭제할 때 application의 다른 부분은 수정할 필요 없이, 아주 쉽게 유지 보수 할 수 있게 만듦으로써 유지보수성을 높여준다. 이러한 컴포넌트는 어떻게 만들 수 있을까? 리액트에서는 components는 함수이다. script 태그의 안쪽에서 header라는 함수를 작성하고, JSX를 이용하여 원하는 UI elements를 리턴해주자. 그리고 우리..
![]()
NextJS를 처음 배우면서 공식 홈페이지에 있는 내용을 따라하며 정리하려고 하며 당해 포스트는 그 첫 시작이며, React가 Dom을 어떻게 다루는지에 대해 주요하게 다루려고 한다. Getting Start with React 리액트를 project에 도입하기 위해서는 unpkg.com 이라는 곳에서 2가지 스크립트(react, readt-dom)를 로드 해줘야 한다. react: React library의 코어 react-dom: React를 이용하여 DOM을 컨트롤 할 수 있는 DOM methods를 제공해준다. 만약, 우리가 JavaScript만을 이용하여 h1태그를 div태그 안에 넣으려고 했다면, 아래와 같이 긴 코드가 필요했겠지만 const header = document.createElem..
