자바스크립트의 확장 문법 번들링되는 과정에서 자바스크립트 형태의 코드로 변환된다 jsx function App(){ return ( Hello react ); } 변환 후 function App(){ return React.createElement("div",null,"Hello", React.createElement("b",null,"react")); } 특징 감싸인 요소 컴포넌트에 여러 요소가 있다면, 반드시 부모요소 하나로 감싼 후 리턴해야 한다 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙 v16 이후부터는 div태그 대신 Fragment 기능 사용 가능 function App() { return ( 에러 에러 ); } export default App; function App..

프로젝트 생성 및 실행 node.js, npm, yarn 설치 node.js는 당장은 필요없지만, 설치시 npm이 함께 설치된다 npm은 패키지매니저 도구 node.js 설치 후, node.js의 cmd창 실행 npm 설치 확인 명령어 : npm -v yarn 설치 (패키지 관리자 도구) 설치 명령어 : npm install --global yarn 설치 확인 : yarn --version 코드에디터 설치 (Visual Studio Code) 설치 후 좌측 확장팩 설치 메뉴 이용 ESLint 설치 Reactjs code Snippets 설치 Prettier-code formatter 설치 Koran Language Pack for Visual Studio Code 설치 f1 누른 후 Configure D..

개요 자바스크립트의 발전 자바스크립트 만으로 대규모 어플리케이션을 만들 수 있게 됨 구조관리의 발전 필요 이를 해결하기 위해 수많은 프레임워크 출시 앵귤러,뷰js 등 해당 프레임워크는 주로 MVC, MVVM 아키텍쳐 사용 모델과 뷰가 있다는 공통점 보통 사용자가 어떤 작업을 하면, 변경사항을 뷰에 반영 반영하는 과정에서 뷰를 변형(mutate) 페이스북 개발팀은 뷰를 변형하는 것이 아닌, 새로 렌더링하는 방식 고안 리액트 리액트의 특징 리액트는 라이브러리이다 구조가 MVC등인 프레임워크와는 달리 오직 view만 신경쓰는 라이브러리 기타 기능은 직접 구현해 사용해야한다 컴포넌트 특정 부분이 어떻게 생길지 정하는 선언체 템플릿과는 다른 개념 재사용이 가능한 API로 수많은 기능을 내장 컴포넌트 하나에서 해당..