리액트 컴포넌트와 JSX 문법: Virtual DOM의 기본 이해
·
웹개발/REACT
리액트(React)는 현대 웹 개발에서 중요한 역할을 하는 라이브러리입니다.리액트의 핵심 개념과 JSX 문법을 간단히 설명하겠습니다.리액트는 UI를 컴포넌트 단위로 나눕니다. 각 컴포넌트는 트리 구조를 형성하며, 이 구조는 실제 DOM과 유사합니다.컴포넌트 트리는 DOM과 같은 형태로 구성됩니다. 리액트는 Virtual DOM을 사용하여 성능을 최적화합니다.Virtual DOM에서 변경 사항을 적용한 후, 실제 DOM에 필요한 부분만 업데이트하여 효율적으로 렌더링합니다.리액트에서는 JSX(Java Script XML) 을 사용합니다.(강제는 아니지만 권장,, 매우매우 높은 빈도로 사용중입니다.)JSX는 JavaScript 안에서 HTML을 작성할 수 있는 문법입니다.컴포넌트를 정의하고, render 함수..
초보자도 쉽게 배우는 리액트 컴포넌트 작성 방법!
·
웹개발/REACT
안녕하세요!오늘은 여러분에게 리액트라는 재미있는 프로그램을 알려드릴게요:)리액트는 우리가 웹사이트를 쉽게 만들 수 있게 도와주는 도구예요. 이제, 리액트로 컴포넌트를 어떻게 만드는지 함께 배워볼까요?그전에 먼저,,!HTML이란 무엇인가요?HTML은 웹사이트를 만드는 기본적인 언어예요. 여기 작은 예시가 있어요: 내 웹사이트 여기는 소개 내용을 쓰는 곳이에요. 위의 예시는 우리가 웹사이트를 만들 때 사용하는 HTML이에요. HTML은 매우 간단하고, 우리가 무슨 내용을 넣을지 쉽게 알 수 있어요.리액트에서 컴포넌트 만들기리액트에서는 우리가 웹사이트를 조각조각 나눠서 만들 수 있어요. 이 조각을 "컴포넌트"라고 해요. 두 가지 방법으로 컴포넌트를 만들 수 있어요! createElement..
바벨과 웹팩, Vite의 역할: 리액트 개발에서의 필수 도구 이해하기
·
웹개발/REACT
바벨의 유래바벨(babel)이라는 이름은 고대 '바벨탑' 이야기에서 유래되었어. 이 이야기에서는 전 세계 사람들이 모여서 세상에서 가장 높은 '바벨탑'을 만들려고 했지만, 언어가 달라서 탑을 완성하지 못했지. 프런트엔드 개발에서도 바벨은 서로 다른 언어 규약으로 작성된 파일을 웹 브라우저가 이해할 수 있는 형태로 변환해주는 역할을 해. 자바스크립트 생태계의 큰 변화, ES6 등장자바스크립트는 2009년에 ES5가 출시된 이후로 6년 동안 큰 변화가 없었어. 그러다가 2015년에 ES6(2015)가 등장하면서 자바스크립트 생태계에 큰 변화가 일어났지. ES6는 기존 ES5와 확연히 다른 점이 많아서 새로운 자바스크립트 언어라고 해도 과언이 아니야. 브라우저가 지원을 안하네하지만, ES6가 아무리 훌륭해도 ..