React의 작동원리
Single Page Application
- 하나의 html 파일만 보여주고, 내부의 요소는 모두 자바스크립트를 활용해서 변경시키는 것
- 페이지가 변경될 때마다 무조건 새롭게 html, css 파일을 표시해야했던 예전 방식보다 훨씬 효율적!
Virtual Dom with Diff Algorithm
- React 는 가상으로 html 요소들을 생성하고 (가짜 DOM), 현재 화면에 표시되는 html 요소들 (진짜 DOM) 과 비교해서, 달라진 부분만 다시 그리는 방식으로 렌더를 진행
요소가 달라질 때마다 새롭게 화면을 다시 그리는 것이 아니라, 달라진 부분만 알아서 React 가 다시 그려줌
Component
- React 는 component 라는 것을 작성해서, 조합하는 방식으로 코딩을 진행, 하나의 html 페이지에서 요소들을 잘게 나눈 것
- 팀으로 하나의 페이지를 작성할 때 요소 별로 나눠서 작업할 수 있고, 복잡한 페이지의 코드를 조금 더 직관적으로 볼 수 있는 등 다양한 장점이 있음
- 작성방식은 함수형과 클래스형이 있으나 최근에는 함수형을 쓰는 것이 트렌드
- react component 명은 무조건 대문자로 시작
import React from 'react';
function Hello({ color, name, number }) {
return (
<div style={{ color }}>
안녕하세요 {name}
</div>
);
}
export default Hello;JSX(Javascript XML)
- JSX 는 react 에서 쓰이는 자바스크립트 확장 문법으로, 쉽게 말하면 html 을 자바스크립트 기반으로 작성할 수 있도록 하는 문법.
- 지금까지는 자바스크립트 코드는 js 파일이나 <script> 태그 안에 쓰고, html 코드는 html 파일 안에 써왔지만, 이제부터는 js 파일 안에 자바스크립트와 html 코드를 모두 작성함
jsx 사용법
1. 전체 감싸는 부모태그가 있어야함(빈 태그도 상관없음)
return (
<>Timer</>
)2. 선언한 변수나 함수를 쓸 때는 {} 기호 안에서 사용
function Timer() {
const name = "김코딩"
return (
<div>안녕하세요. {name} 입니다.</div>
)
}3. html 태그 요소에 class 를 주고 싶을 때는, className 을 사용
import './admin.css';
function App() {
return (
<div className="admin">
</div>
);
}
export default App;4. camelCase 사용
- 자바스크립트를 사용하면서, 변수나 함수를 만들때는 첫번째 단어는 소문자, 두번째 단어부터는 대문자가 되도록 작성함
시작하기
1. node와 yarn 설치
2. 프로젝트 생성 (vite 사용: 빌드 속도가 빠름)
yarn create vite 프로젝트명 --template react
3. 앱이름으로 생성된 폴더로 이동하여 yarn 명령어 실행
4. 프로젝트 실행: yarn dev
5. vs code 확장프로그램 설치: ES7+ React/Redux/React-Native snippets
6. src > components 폴더 생성 > Test.jsx 파일 생성 > rfce 입력 시 자동완성
- Test.jsx
import React from 'react'
function Test() {
return (
<div>Test</div>
)
}
export default Test- App.jsx
import Test from "./components/Test";
function App() {
return (
<div>
<Test />
</div>
);
}
export default App;7. 프로젝트 실행한 localhost주소로 들어가보면 화면이 잘 뜨는걸 확인가능
index.html → main.jsx → App.jsx → Test.jsx를 거쳐 Test.jsx 컴포넌트의 내부 내용이 화면에 노출되는 것임, 즉 화면을 변경하려면 App.jsx에서 보여주려는 컴포넌트를 선언(import통해)하고 수정은 해당 컴포넌트(여기선 Test.jsx)에서 작업하면 됨
- 기본스타일을 제거하려면 main.jsx에서 선언된 index.css를 제거
React 변수와 상태(props, state)
props 사용(비구조할당)
- props는 properties의 줄임말
- Test.jsx 의 상위 컴포넌트인 App.jsx 내부 태그안에 변수 = 값 형태로 명시해주면 해당 변수 그대로 하위컴포넌트(여기선 Test.jsx)의 내부에서 사용가능
- 문자는 변수 = "문자", 숫자는 변수 = {숫자} 로 사용
- props를 사용하면 변수를 분해하면서 받아오는 비구조할당를 사용할 수 있는 장점이 있음
const hero = {'name': '곽정', level: 99, age: 30, intro: '의천도령기'}
const {name, level, age, intro} = hero;//비구조할당
// 다른 예시로
export const data = {'id': 1, 'title': '제목1', 'content': '내용1'}
// 위 export된 data를 다른 곳에서 import로 사용할 경우에도 비구조할당과 동일원리
import {data} from '../constants/data'
분해된 변수들을 아래와 같이 사용함
import React from "react";
function Test(props) {
const { sayhello, name, age, intro } = props;
return (
<div>
<h3>{sayhello}</h3>
<div>
이름은 {name}, 나이는 {age}, 소개하자면 {intro}
</div>
</div>
);
}
//변수 초기화도 가능
Test.defaultProps = {
sayhello:'반갑습니다',
name: '기본 이름'
}
export default Test;state 사용
- 버튼클릭시 숫자가 증가하는 컴포넌트를 작성해보면 아래와 같음
- onClick 이벤트 사용시 jsx에서는 onClick={함수명} 으로 사용
import React from "react";
function Click() {
let count = 0;
const countUp = () => {
count = count + 1;
console.log(count);
};
return (
<div>
{count}
<button onClick={countUp}>숫자증가!</button>
</div>
);
}
export default Click;그러나 클릭해도 숫자가 올라가지 않음 (실제 console.log로 보면 숫자는 올라감)
- 값이 변경될 때마다 표시하려면 useState를 사용해야 함
// 기본 사용
const [변수명, set변수명] = useState(변수의 초기값);
// 초기값이 0인 test라는 변수의 state
const [test, setTest] = useState(0);
// 초기값이 빈 배열인 data라는 변수의 state
const [data, setData] = useState([]);- set변수명: 변경된 값으로 변수를 새롭게 render 해주는 함수
클릭할 때마다 count가 +1씩 증가하는 것으로 보여주려면 아래와 같이 변경
const [count, setCount] = useState(0);
const countUp = () => {
setCount(count+1);
};- 만약 클릭시 인자를 받아 함수를 호출하려면 화살표 함수 형태로 작성해야 함
onClick={() => changeCount(인자값)}
20230227 메가바이트 스쿨 FE4기 수업자료를 참고하였습니다.