React3 2. JSX란? JSX (JavaScript XML) 란? Javascript에 XML을 추가 확장한 문법 리액트로 프로젝트 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아님 브라우저에서 실행하기 전에 바벨을 사용해서 일반 자바스크립트 형태의 코드로 변환 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리 예시 // 실제 작성할 JSX 예시 function App() { return ( Hello, GodDaeHee! ); } // 위와 같이 작성하면, 바벨이 다음과 같이 자바스크립트로 해석하여 준다. function App() { return React.createElement("h1", null, "Hello, GodDaeHee!"); 문법 1. 반드시 부모 요소 하나가 감싸는 형태 ( Virtual .. 2023. 8. 2. 0. 개발환경 Node.js 설치 React 프로젝트를 생성하려면 Node.js 먼저 설치. 구글에서 공개한 소프트웨어 웹 브라우저가 아닌 컴퓨터/서버에서 자바스크립트를 실행할 수 있게 해주는 자바스크립트 런타임 도구 npm (node pakage manager) node 설치 시 자동으로 같이 설치 자바스크립트 라이브러리 관리 가능 node_modules 폴더에 라이브러리 저장, pakage.json에 관련 라이브러리 정보 저장 spring에서도 라이브러리를 다 커밋, 푸쉬하지 않고 build.gradle 혹은 pom.xml을 통해 협업하는 것과 유사 Yarn 설치 npm의 단점을 보완하여 성능/속도를 개선한 것이 yarn. - npm은 모든 패키지들을 다 가지고 있어서 무거움 - 페이스북, Exponent, Goo.. 2023. 8. 2. 1. 리액트 시작하기 - 주요 특징 리액트란? 자바 스크립트 라이브러리. SPA(Single Page Application)을 위한 사용자 인터페이스를 구축하는데 사용 웹이나 모바일 앱에서 view layer를 처리하는데 사용 페이지를 다시 로드하지 않고 데이터 변경하도록 가상 돔(Virtual DOM)을 사용. 퍼포먼스 최적화. 특징 1. 컴포넌트 (Component) 컴포넌트 기반의 라이브러리 컴포넌트 : 화면을 이루는 작은 요소들, 여러 화면에서 사용 (재사용성) 1) 클래스형 : 프로퍼티, state와 함수 등을 포함 2) 함수형 : state 포함 X, data를 받아 출력할 컴포넌트 반환 2. Props and State 단방향 데이터 흐름 (one-way data flow) or 단방향 바인.. 2023. 8. 2. 이전 1 다음
