React (3) 썸네일형 리스트형 React 기초 : JSX 사용법 리액트에서는 HTML 대용으로 JSX를 사용합니다. 1. 태그에 class 주는 방법 2. 리액트에서 데이터 바인딩 쉽게 하는 방법 위에서 선언한 변수, 함수 등을 { } 안에 넣어서 표현 let posts = '개발 블로그'; return ( {posts} ) 3. JSX에서 style 속성 넣을 때 style = { object 자료형으로 만든 스타일 } Camel Case 사용 * 스타일을 저렇게 넣기 번거로우니까 className으로 CSS를 적용하는 것이 더 편함! React 기초 : 리액트 설치 / 세팅 및 프로젝트 생성 1. Node.js 최신 버전 설치 (create-react-app 라이브러리 이용하기 위해) 2. Visual Studio Code 설치 3. React 프로젝트 저장할 폴더 생성 4. VSCode에서 만든 폴더 열기 (Open Folder) React 리액트 프로젝트 생성하기 - VSCode 사용 1. VSCode에서 터미널을 열고 npx create-react-app (프로젝트명) 입력 create-react-app : 리액트 셋팅 다 된 boilerplate 만들기 쉽게 도와주는 라이브러리 * 프로젝트 생성 전 세팅을 제대로 마쳤는데 실행되지 않고 오류가 난다면 컴퓨터 재부팅하기! 2. 프로젝트명의 하위폴더를 Open Folder로 열기 3. 코드짠 부분을 미리 보기 띄우려면 터미널에 npm st.. React 기초 : 리액트를 사용하는 이유 React 리액트를 사용하는 이유 = Web-app을 쉽게 만들 수 있기 때문 1. 모바일 앱으로 발행이 쉬움 2. 앱처럼 뛰어난 UX 3. 그냥 웹사이트보다 비즈니스적인 장점이 큼 * 리액트는 문법이 어렵다는 단점이 있음 / 2020년 이후로 리액트 문법이 class 없이 쉬워져서 조금은 만만해짐 * 자바스크립트 변수,if,for,array,object,function,이벤트리스너,HTML,CSS 기초 지식 필수 이전 1 다음