본문 바로가기

Computer Programming/React

JSX란? React 에서 사용하는 JSX 문법 | Babel
Computer Programming/React 2023. 5. 15. JSX란? React 에서 사용하는 JSX 문법 | Babel 1. JSX란? React에서의 JSX const element = Hello, world!; 위 태그 문법은 JSX 라고 불리는 javascript를 확장한 리액트에서 차용하는 문법이다. 리액트와 함께 사용되는 이유는 리액트가 UI와 state 의 변화에 초점을 맞추는 라이브러리이기 때문에 자바스크립트 함수와 html 태그를 함께 사용하는 것이 효과적이기 때문이다. 즉, react 에서는 렌더링 로직이 ui로직 ( 이벤트 처리, state 변화, 데이터 준비방식) 과 밀접한 연관이 있다. 따라서 마크업인 html 태그와 함께 로직을 처리할 수 있는 JSX를 사용한다. React에서 JSX 문법 사용이 필수는 아니지만, Javascript 코드와 함께 ui 관련 작업을 쉽게 할 수 있는 html 태그를 ..
리액트 프로젝트 설치하기 (create-react-app or vite)
Computer Programming/React 2023. 5. 14. 리액트 프로젝트 설치하기 (create-react-app or vite) 1. 리액트 코드와 브라우저 호환 리액트 코드는 브라우저에서 바로 호환가능한 코드가 아니다. 예를 들면, 자바스크립트로만 구성된 웹페이지는 한 프로젝트 폴더 안에 .html / .js / .css 파일들만 있으면 브라우저에서 바로 동작 가능하지만 리액트 코드 웹페이지는 코드를 자동으로 변환해주는 작업을 포함해야한다. 또한, 리액트 코드로 웹을 개발하면서 실시간으로 브라우저에서 동작하는 과정을 관찰해야 하고 이를 위해서는 백그라운드에서 코드 변환이 일어나야 한다. 리액트를 사용하면 하나의 .js 파일에 자바스크립트와 JSX (html처럼 보이는 것) 을 함께 작성하기 때문에 이 자바스크립트 파일만으로는 브라우저에서 유효하지 않고, 브라우저는 이 코드 자체 만으로는 실행할 수 없다. => 따라서 브라우저가 ..
[React] 리액트란? 리액트를 사용하는 이유? (vs. Vanilla js)
Computer Programming/React 2023. 5. 14. [React] 리액트란? 리액트를 사용하는 이유? (vs. Vanilla js) 1. Javascript만을 사용한 코드는? 자바스크립트는 명령형 접근방식(imperative approach)이기 때문에 모든 단계를 설명하는 것이 중요하다. 예를 들면 화면에 특정한 페이지를 띄우는 방식 등에서 일련의 액션들을 단계별로 설명해야한다. -> 모든 단계를 명시하는 과정에서 한계가 나타날 수 있고 세부사항들을 신경써야한다. 이는 되풀이되고 반복적인 액션들을 작업하게 될 수 있다. 2. 리액트(React.js)란? 리액트는 client-side 자바스크립트 라이브러리이며 모던, 반응형 유저 인터페이스관리에 용이하다. Declarative and component-focused approach 3. React.js의 장점은? 리액트를 사용하면 같은 방식으로 동작하지만 훨씬 더 간결한 코드로 작..

티스토리툴바

*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*