1. 단축키 및 실행커맨드
vscode 터미널 ctrl + `
1-1. create-react-app 리액트 프로젝트 생성
npm init react-app <폴더이름> // 현재 폴더는 .
1-2. npm install classnames >> classNames() 메소드 사용할 수 있는 라이브러리 설치
1-3. npm run start 프로젝트 실행(개발모드 실행)
1-4. ctrl + c 개발 모드 종료
1-5. npm run build >> 빌드 생성
1-6. npx serve build >> 빌드 서버에서 실행
2. JSX(JavaScript XML)
리액트에서 html을 작성하게 해주는 자바스크립트 확장 문법
.render() 안의 html 코드는 하나의 태그로 감싸져있어야한다.
* 태그로 감싸지 않으려면 <Fragment></Fragment>를 사용한다. >>> <> </> 이렇게 축약해서 사용한다
jsx에서 자바스크립트를 사용하려면 {중괄호} 를 사용한다. {}안에는 표현식이 들어가야한다!
속성명을 사용할 때는 class와 for 같은 예약어는 다른 명칭을 사용한다. className, htmlFor
영단어가 2개 이상 붙은 속성명은 카멜케이스를 사용한다. onClick onBlur 등등...
비표준속성 data-* 은 그대로 사용하면 된다.
react에서는 변수에 html 태그 자체를 담을 수 있다.
ex) const element = <h1>안녕 리액트!<h1>;
여기서 element는 객체가 된다.
이 객체를 리액트 엘리먼트라고 부른다.
3. 리액트 컴포넌트
함수 이름의 첫글자를 대문자로 사용한다.
리액트 엘리먼트를 반환하는 함수
커스텀 태그처럼 활용할 수 있다.
ex)
function Hello(){
return <h1>안녕 리액트</h1>;
}
const element = (
<>
<Hello /> >>>> 커스텀 태그로 사용된 리액트 컴포넌트
</>
);
root.render(element);
4. Props
컴포넌트에 적용된 속성들
ex)
function Custom(){
return <태그> ........ </태그>;
}
<Custom color="blue"/> >> 여기서 color가 prop 이다.
리액트 개발자 도구에서 props탭에서 확인할 수 있다.
prop은 하나의 '객체' 형태로 컴포넌트 함수의 첫번째 파라미터로 전달된다.
prop 하나 하나가 파라미터로 전달되는 객체의 프로퍼티가 된다.
5. children
컴포넌트의 자식들 값을 갖는 prop
예문)
// Button.js
function Button({ children }) {
return <button>{children}</button>;
}
export default Button;
//App.js
import Button from './Button';
import Dice from './Dice';
function App() {
return (
<div>
<Button>던지기</Button>
<Button>처음부터</Button>
<Dice color="red" num={4} />
</div>
);
}
export default App;
컴포넌트 태그 <Button></Button>사이의 내용이
children prop의 값으로 전달된다.
6. State
React에서 제공하는 훅
useState()는 초기값과 그 값을 수정할 수 있는 메소드를 배열로 반환한다.
예문)
import {useState} from 'react';
const [num, setNum] = useState(1);
num은 1이 되고 setNum()함수를 사용하여 num의 숫자를 변경할 수 있다.
이 경우에 setNum() 를 사용해서 '값이 변경되야' 새롭게 렌더링이 된다.
7. 참조형 state
참조형state를 사용해서 arr, setArr()를 만들었다고 가정할 때,
arr.push(값);
setArr(arr); 를 사용해도 arr은 주소값을 그대로 가지고 있어서 변경되었다고 판단하지 않아 새로운 렌더링이 작동하지 않는다.
아래와 같은 방법 등으로 새로운배열을 만들어줘야한다
예문)
setArr([...arr, 값]);
* state lifting 찾아보기
8. 리액트는 가상 돔을 사용한다.
엘리먼트를 새로 렌더링할 때
렌더링의 모습을 실제 DOM트리에 반영하는 것이 아니라 가상 DOM에 반영한다.
state 변경 전 / 후의 가상 DOM를 비교, 변경된 부분의 실제 DOM노드를 변경한다.
실제 DOM 노드를 고려하지 않고도 단순하고 깔끔한 코드의 작성이 가능하다.
변경사항을 리액트가 수집하여 한번에 처리할 수 있다.
9. 리액트에서 인라인 css 속성 설정하기
css속성을 담은 객체를 style 속성에 속성값으로 전달한다.
const style = {
color: "blue",
backgroundColor: "#fff" >>> - 이 들어간 속성명은 camelCase로 작성한다.
}
10. 리액트 css파일로 스타일 적용하기
import 'css파일경로/파일명.css'
<태그 style={style}>...