리액트3 [React] JSX 문법 한 번에 정리하기 리액트를 위해 필요한 지식은 얼마 되지 않는다. JSX, 컴포넌트, 훅, 상태 관리 정도이다. 그중에서 JSX는 가장 간단한 개념 중 하나다. 리액트는 컴포넌트로 앱을 구성하며, 컴포넌트는 마크업을 반환하는 함수라고 했다. 이때 이 마크업이 바로 JSX이며, 리액트에서 사용하기 위해 HTML을 확장해서 만든 언어이다. 기본적으로 HTML 태그들을 지원하지만, 기존 HTML과는 약간 다른 점이 있다. 또한 중괄호({})를 사용하여 자바스크립트 표현식을 사용할 수 있다는 것도 JSX의 특징이다. JSX 문법에 대해 아래와 같이 정리해 보자. 1. 태그와 속성JSX에서는 기본적으로 HTML 태그를 사용할 수 있다. 그러나 기존 HTML과는 다른 몇 가지 규칙이 있다.소문자로 시작하는 HTML 태그를 사용하며,.. 2024. 12. 2. 리액트 라우터 개념과 설정 방법 지난 글(https://lifewithcoding.tistory.com/282)에서 리액트는 SPA(Single Page Application)를 위한 라이브러리라고 설명했다. 즉, 리액트로 개발한 앱은 하나의 페이지 내에서 자바스크립트로 실행되며, 다른 내용을 보기 위해 버튼을 클릭해도 페이지 전체가 새로고침되지 않고 필요한 요소들만 재렌더링된다. 이는 SPA의 주요 특징 중 하나로, 부드럽게 페이지 내용을 변경할 수 있다는 장점이 있다. 하지만 몇 가지 문제점도 존재한다. 첫 번째로, 새로고침 시 처음 화면으로 돌아간다. SPA는 하나의 앱으로 동작하기 때문에 새로고침은 앱을 처음부터 다시 시작하는 것과 같다. 따라서 사용자가 앱과 상호작용하며 변경한 상태는 새로고침 시 초기화되고, 모든 작업을 처음.. 2024. 11. 25. [React] 리액트 기초와 리액트 앱 생성 리액트를 한마디로 정의하자면, "컴포넌트 기반 UI 개발 자바스크립트 라이브러리"라고 할 수 있겠다. 1. 컴포넌트 기반 UI 개발 기본적으로, 리액트는 UI를 컴포넌트 단위로 나누어 설계하고 각 컴포넌트를 조합하여 개발한다. 2. 자바스크립트 라이브러리 리액트는 자바스크립트로 작성되어 있는 라이브러리이고, 작성된 컴포넌트를 사용하기 위해서 자바스크립트 코드를 작성해야 한다. 리액트는 기본적으로 SPA(Single Page Application) 개발에 최적화된 라이브러리이며, Next.js나 Gatsby 같은 프레임워크를 사용하면 서버 사이드 렌더링(Server Side Rendering, SSR)이나 정적 사이트 생성(Static Side Generation, SSG) 방식으로도 개발할 수 있다. 기.. 2024. 11. 16. 이전 1 다음 728x90
