Web Front-end/React
[React/jsx/DOM/Basic] React의 DOM 조작과 JSX
SandBox환경에서 React를 살짝 맛보고, 후에 Visual Code를 이용해서 npm을 이용해보겠습니다. DOM 조작 JS로 DOM을 조작하는건 당연한 일이다. JS는 "동적"으로 웹페이지를 만들기 위해서, 작성하는 스크립트니까. * DOM 이란? 더보기 Document Object Model로, 브라우저에서 HTML 태그를 처리하기 위해서, 만든 "개념"이라고 보면 된다. 예를들어, 버튼 1개가 있으면 우리는 버튼이라고 인식하지만 , 브라우저에서는 버튼 태그를 지정하기 위해서 일종의 관리 체계가 필요하게 된다. 즉, 태그들과 같은 HTML 객체들을 관리하기 위한 체계가 DOM이다. DOM은 트리형태를 띄고 있다. const rootEl = document.getElementById("#root"..
[React/JSX/Component] React의 특징(2)
Step3. React는 Component로 구성되며, Component는 state(Data)와 Render(view)로 구성된다. React는 Data와 화면(view)를 일치시키기 위해서, 만들어졌습니다. 따라서, Data(State)를 다루는 곳과 화면에 반영(Render)하는 영역이 있습니다. 이 둘을 합쳐서 Component라고 하는데, 컴포넌트가 React의 최소 단위라고 할 수 있습니다. Class Component로 보면, Component의 구성을 한눈에 볼 수 있습니다. (원시적인 형태) Example Code) 좋아요 버튼 Class Component // Class Component로 // React가 설치 되어있다고 가정합니다. import react from 'react' co..
[React/SPA/View] React의 특징
React가 막 특별한 것처럼 느껴질 수 있지만, 한가지만 일단 알고갑시다. 브라우저는 HTML,CSS,JS만 알아들을 수 있다. React는 JavaScript로 만들어진 하나의 Libraray ? FrameWork ? 일 뿐입니다. React는 Data와 View를 통합해서 관리하면서, 독자적인 생태계를 구축하기 시작했습니다. 그러면서, React만의 특징을 갖게 되었는데 , 먼저 눈으로 쭉 보고 하나씩 뜯어봅시다. React의 특징 React는 결국 JavaScript이다. React로 만든 페이지는 SPA이다. React는 "View"만을 구성한다. React는 Component로 구성되며, Component는 state(Data)와 Render(view)로 구성이 된다. React는 JSX를 지..
[React/JS] 리왜씀 (React 왜 쓰나요)
https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org React 공식문서를 참고하면 아래와 같이 안내되어 있습니다. React는 상호작용이 많은 UI를 만들 때, 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하고, React는 데이터가 변경됨에 따라, 적절한 컴포넌트만 효율적으로 갱신하고 렌더링하게 됩니다.(이뭔솔?) 처음 본다면, 어떤 어려움이 있는지 모르겠습니다. 3줄요약으로 지르고 가겠습니다. React를 만든 Facebook은 데이터를 실시간으로 화면에 반영을 해야했다. Facebook은..