REACT4 땅꼬마의 React 기초 개념 이해하기! React 공부를 시작해보겠다고 했지만 막상 개념을 정확히 모른 상태에서 코딩을 하려하니.. 왜 이렇게 되는거지?라는 부분이 해결이 되지 않았었다. 이번에 이론적인 부분을 정리하면서 React가 어떻게 동작하는지 정리해보려 한다. 1. VirtualDOM에 대한 이해 React로 개발된 친구들은 다른 친구들보다 빠른 이유는 가상돔(VirtualDOM) 덕분이다. DOM(Document Object Model)은 웹페이지에 들어간 HTML 요소들을 트리형태로 표현한 것이다. ex) ->DOM이 제공하는 API를 통해서 조작할 수 있음 실제 DOM의 조작이 일어날때 브라우저가 HTML을 탐색하여 해당 요소와 자녀요소를 찾아 제거하고 새롭게 수정된 요소들로 교체한 후에 알맞게 css, 레이아웃정보를 계산하여 .. 2022. 11. 16. 땅꼬마의 React-Router 적용하기! HTML의 경우 요렇게 a태그를 활용하여 페이지 전환을 한다. 그리고 전환될때마다 페이지가 리로드되어 깜빡거림이 있다. React는 SPA(Single Page Application) 프레임워크이다! 페이지 전체의 요소를 하나의 페이지에 담고 있기 때문에 리로드할 필요 없이 필요한 데이터만 가져와 보여주게끔 해준다. 그 필요한 요소가 어떤것인지 주소를 감지하는 역할을 하는 것이 react-router다. 1. react-router-dom 설치 npm install react-router-dom 2. 적용하기 index.html BrowserRouter : 태그를 통해 페이지에 리로드 없이 이동한다. import React from 'react'; import ReactDOM from 'react-dom.. 2022. 8. 29. 땅꼬마의 React에 CSS를 적용해보기! React에 스타일을 적용하는 방법이 생각보다 여러개였다. 무작정 .css 만들어서 import로 넣어주면 끝인줄 알았는대.... 그래서 적용할 수 있는 방법을 정리해보았다. 1. .css파일 사용 App.css div 태그와 span 태그에 간단한 스타일을 적용했다. div.main{position: relative; display: block; text-align: center; font-size: 18px;} span{color: blue;} App.js css 파일을 import하여 css 설정한 class, 태그를 사용 import './App.css'; import React from 'react'; function App() { //메인페지이 return ( 글씨입니다 ); } export .. 2022. 8. 26. 땅꼬마의 React 시작! Component 분리가 신기하다! 똑같은 일상에서 매너리즘에 빠진 요즘 놀면 뭐해? 뭐라도 해야지! 하면서 찾다가 코딩을 시작했을때부터 핫하다 했던 React를 이제서야 공부하게 되었다. 조금씩 꾸준히 이 블로그도 채워지겠지.... 그럼 지금까지 정리한 리액트에 대해서 간략하게 남겨보자! React?? 리액트는 자바스크립트 라이브러리이다. 어떤 책에서는 오직 View만 신경쓰는 라이브러리라고 표현되었다. 지속적으로 데이터가 변화하는 대규모 어플리케이션을 구축을 위해 React가 만들어졌다. 여러 특징이 있는데 그 중 Component 기반 구조로 각각 독립된 컴포넌트를 만들어 이 컴포넌트를 조합하여 화면을 구성할 수 있다는 점이 매우 흥미롭다! React 특징 - Virtual DOM : DOM(Document Object Model),.. 2022. 6. 14. 이전 1 다음
