Front End/React (3) 썸네일형 리스트형 JSX (JavaScript XML) JSX (JavaScript XML) JSX는 React에서 권장하는 JavaScript의 확장 문법이다. XML 또는 HTML과 비슷하지만 JavaScript로 컴파일된다. JSX를 사용하면 JavaScript 코드 내에서 더 간결하고 가독성있게 HTML 요소 및 컴포넌트를 작성할 수 있다. 1. 속성명은 카멜 케이스로 작성하기 JSX 문법에서도 태그에 속성을 지정해 줄 수 있다. 단, 여러 단어가 조합된 몇몇 속성들을 사용할 때는 반드시 카멜 케이스(Camel Case) 로 작성해야 한다. 예를 들면 onclick, onblur, onfocus 등과 같은 이벤트 속성이나, tavindex 같은 속성들이 있다. 단, 예외적으로 HTML에서 비표준 속성을 다룰 때 활용하는 data-* 속성은 카멜 케이스.. React의 기본 개념 React 개요 React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다. Facebook에서 개발하였으며. 컴포넌트 기반 아키텍처를 통해 재사용성과 유지보수성을 높인다. React 기본 용어 1. JSX (JavaScript XML) JSX는 React에서 권장하는 JavaScript의 확장 문법이다. XML 또는 HTML과 비슷하지만 JavaScript로 컴파일된다. JSX를 사용하면 JavaScript 코드 내에서 더 간결하고 가독성있게 HTML 요소 및 컴포넌트를 작성할 수 있다. 2. 컴포넌트 (Components) 컴포넌트는 React 애플리케이션의 구성 요소이다. 재사용 가능하고 독립적인 코드 조각으로 UI를 표현한다. 함수형 컴포넌트: props를 받아들이고 렌더링 결.. VSCode로 React 개발 환경 세팅하기 1. node.js 를 다운받는다. (안정적으로 작동하는 LTS버전을 다운) 2. 전부 Next를 눌러 설치를 마친다. 3. 설치가 잘 되었는지 명령 프롬프트(cmd)에서 확인한다. node -v 는 Node.js의 버전을 확인하는 명령어이고, npm -v 는 Node.js에서 사용할 패키지를 관리하고 실행하는 도구의 버전이다. 4. 사용할 코드에디터인 VS Code 를 다운받는다. 6. create-react-app으로 리액트 프로젝트 생성 npm init react-app 혹은 폴더를 열어 터미널에서 npm init react-app . 을 작성하여 설치한다. * 터미널 열기: View - Terminal (Ctrl+`) 7. 개발 모드 실행하기 터미널에 npm run start 를 입력하면 생성한 .. 이전 1 다음
