React 23

React Router(react-router-dom) 라이브러리 설치

React Router(react-router-dom) 라이브러리 설치 1. 터미널을 열고 다음 명령어를 실행하여 simpleroute 디렉토리에 React 프로젝트를 생성한다. 실행 후 npm start를 통해 실행 결과가 잘 나오는지 확인한다. npx create-react-app simpleroute cd simpleroute npm start 2. Create React App 프로젝트가 잘 생성되었다면 이제 VScode에서 React Router를 설치한다. npm install react-router-dom@^6.3.0 라이브러리가 잘 설치되었다면, package.json 파일의 dependencies 항목에 react-router-dom 이라는 라이브러리가 등록된 것이 확인된다. 3. App..

React 2022.06.04

REACT JSX 문법

JSX 문법 1. html에 class 넣을 때는 className JSX는 일종의 자바스크립트라서 자바스크립트에서 사용하는 예약어인 class라는 키워드를 사용할 수 없다. 그래서 class=" " 넣고 싶으면 className이라고 쓴다. 2. 변수를 html에 넣을 때는 {중괄호} 중괄호 안에 데이터바인딩하고 싶은 변수명만 담으면 된다. *데이터바인딩: 변수에 있던걸 html에 꽂아넣는 작업 3. html에 style속성 넣고싶으면 { 속성명 : '속성값' } 글씨 font-size 처럼 속성명에 대쉬기호를 쓸 수 없다. 대쉬기호 대신 모든 단어를 붙여써야한다. 붙여쓸 땐 앞글자를 대문자로 치환하여 카멜 케이스로 작성한다.

React 2022.06.03

REACT를 쓰는 이유

React를 쓰는 이유 💡 instagram 웹사이트로 들어가면 페이지 전환을 했을 때 새로고침 없이 부드럽게 동작한다. 이런 페이지를 Single Page Application라고한다. 1. html을 함수, array, object에 보관하고 재사용할 수 있어서 큰 프로젝트일 수록 html 관리 편리해짐 2. React Native를 쓰면 같은 리액트 문법으로 모바일 앱개발도 가능함 💡 Single Page Application html 파일을 1개만 쓰고 다른 페이지를 보여주고 싶을 때 html 부분만 바꿔서 보여준다. 그래서 부드럽게 동작한다.

React 2022.06.02