Cagn

리액트에서 배열을 출력하는 방법은 2가지가 있다. 배열 출력1) 전통적인 방식 (for, while, do while 문)이 경우에 JSX요소(HTML과 그 사이에 중괄호로 묶어진 자바스크립트 변수가 존재하는 형태)로 배열의 요소를 반복적으로 출력하려면 그 요소들을 담을 배열이 필요하다.function App() { const items = ["Chicken", "Pizza", "Hamburger"]; const elements = []; for (let i = 0; i {items[i]}); } return {elements};}export default App;이 경우, item에 들어있는 배열의 요소를 for문으로 돌리게 되고, push를 통해서 그 안에 들어있는 JSX요소를 반복적으로 e..

리액트는 코드를 변경하면 보여주는 뷰를 바로 바꾸지 않는다. 이 이유는 불필요한 렌더링(코드의 변경을 감지해서 화면에 그려주는 일)을 방지해서 성능 하락을 방지하기 위해서이다. 또, UI 상태를 직접 조작하는 것이 아닌, 함수의 상태에 따라서 변경되게 하기 위해서이다. 이로 인해 불필요한 연산을 줄인다. 바로 바꾸지 않기 위해서 리액트는 코드와 뷰 사이에 가상DOM을 만들고, 그 가상DOM의 변경을 감지하는 훅(useState, useEffect 등)을 통해서 그려준다.   훅(Hook)은 걸다, 연결하다(→Hook up)이라는 의미로 code와 가상DOM(Virtual Document Object Model), view를 연결해준다. 가상DOM은 문서 객체 모델의 약자로 객체로 문서를 만들어서 모델처럼..

리액트를 설치하면 다음과 같은 형태로 나오는데,여기에 있는 public이 외부로 보여지는 부분이고, src는 소스 부분으로 여겨진다.외부에서 가장 먼저 보여지는 부분은 index.html로 이곳에 있는 id="root"로 다른 부분을 띄워준다. 이 root는 src의 index.js와 연결이 되고, 이 index.js는 App.js와 연결이 된다.그렇기 때문에 실질적으로 React를 활용하기 위해서 입력하는 부분은 App.js인 것이다. 맨 처음 App.js를 들어가면 이런 형태로 되어있는데,여기서 ~ 의 내용은 미리보기 화면으로 날려도 문제는 없다.이곳을 날리고 나서 내용을 작성하게 되는데, App()하고 return의 사이 공간{빨간 네모}에 JavaScript를 입력하며, 와 사이 공간{주황 네..

＠ 리액트 설치법 프론트 기반 편집을 하기 위해서는 편집기가 필요한데,편리하고 무료로 많이 쓰는 편집기로는 Visual Studio Code가 존재한다. 이 편집기는 https://code.visualstudio.com/ 에서 다운받을 수 있으며, Visual Studio Code - Code Editing. RedefinedVisual Studio Code redefines AI-powered coding with GitHub Copilot for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and..

블로그에 배운 순서대로 올리느라 중간 내용을 올리지 못했다. 이제 조금씩 중간 내용을 올리도록 하겠다. React 왜 사용할까?1. 빨라서2. 편리해서 리액트는 모든 면에서 빠르고 편리할까? 그것을 알기 이해서는 SS와 SPA / CSR와 SSR을 이해해야 한다.SS (Static Site) - 정적 사이트 - HTML, CSS, JavaScript만으로 구성된 사이트 (그렇기 떄문에 데이터를 한꺼번에 요청하고 한꺼번에 응답한다) 단점 : 새로고침할 때마다 해당 페이지에서 필요한 정보를 모두 다시 불러온다. 장점 : 네트워크 트래픽으로는 우수(한 번에 보내기 때문에)하다. SPA (Single Page Application) 비슷한 데이터가 있는 경우, 중복된 데이터를 더 이상 불러올 필요가 없다. 불러..