ReactJS 기초 : 유튜브 무료 강의

리액트를 사용하는 이유

• 웹이지만 앱과 사용성이 비슷함(웹앱) → pwa, react native 등의 앱으로 발행이 쉬움.

• 화면 깜빡임이 없어 구매율이 늘어남.

설치관련 기초 내용

• create-react-app라이브러리를 사용하기 위해 nodejs 설치. nodejs를 설치하면 npm이라는 툴 이용 가능함.

• public/index.html이 메인 페이지임. index.html에서 App.js 내용을 불러오는 것임. index.js에서 getElementById로 연결함.

• node_modules는 라이브러리를 모아놓은 폴더임.

• public은 static 파일 보관함임. 문법으로 변경되지 않는 그리고 변경이 잘 일어나지 않는 파일을 모아놓음.

• src는 소스코드 보관함임. 실질적으로 코딩은 이 파일에 함.

• package.json은 설치한 라이브러리 버전 등을 기록하는 목록임. npm으로 라이브러리 설치할 때마다 자동으로 기록됨.

JSX 사용법

• 리액트에선 HTML 대신 JSX 문법을 사용함.

• class 대신 className 사용. 이미 JS에서 class라는 문법이 예약되어 있기 때문.

• 스타일링은 App.js에서 import 하고 있는 App.css에서 하면 됨.

• 데이터 바인딩이 쉬움.
• 데이터 바인딩이란 서버 등으로 부터 받은 데이터를 HTML에 넣는 것을 말함.
• 데이터 바인딩을 위해 document.getquerySelector().innerHTML=''을 사용하지 않고 {변수명}을 사용하면 끝임. 이때 변수명 뿐만 아니라 return 값을 가지는 함수를 넣어도 return을 HTML에 잘 보여줌.
• img 태그를 쓸 땐 src를 경로가 적힌 string으로 사용하는 것이 아닌 파일을 import하여 src={}형태로 데이터를 삽입함.
• className도 중괄호로 데이터를 삽입할 수 있음.
• style 태그를 사용할 땐 중괄호 안에 object 형식으로 추가해야 함. ex) <div style={ { color: 'blue' } } /> 이때 dash가 들어가는 속성은 camelCase로 작성해야 함. 다만 변수를 지정해서 삽입하는 방식을 더 권장함.

useState

• 사이트에 필요한 데이터를 보관할 때 1) 변수에 넣거나 2) state에 넣는 방법이 있음.

• state를 만들어 데이터를 넣는 방법임.

• import { useState } from 'react'로 리액트의 내장함수 사용.

• useState를 실행하면 array를 return 함. array의 첫 번째 파라미터로 데이터가 들어가고, 두 번째는 데이터를 수정하기 위한 함수가 들어감.

• 이때 구조 분해 할당을 사용하면 변수를 간단하게 표현할 수 있음. ex) let [a, b] = useState()

• state에 데이터를 저장해놓은 이유는 state가 변경되면 HTML이 자동으로 재렌더링 되기 때문임.

• 일반 변수는 변경되어도 자동 재렌더링이 안되고 새로고침해야 됨.

• 따라서 HTML이 새로고침 없이도 부드럽게 변경하기 위해선 state에 데이터를 저장해야 함.

이벤트 리스너 (핸들러) 장착

• onClick = { 클릭될 때 실행할 함수 }, onClick = { () => { 실행할 내용 } }

• 이때 함수는 괄호를 제함. 클릭했을 때가 아닌 바로 실행이 되기 때문에.

• state 값을 직접적으로 변경할 수 없음. useState의 두 번째 파라미터는 setState를 이용하여 state를 변경시켜주는 것임.

• setState의 함수는 괄호 안에 변경을 원하는 함수 또는 계산식을 작성하면 됨.

• 이렇게 setState로 데이터를 변경해야 재렌더링이 일어나는 것임.

state 변경하는 법

• 변경함수를 사용하여 대체할 데이터를 입력함.
• state를 직접적으로 수정할 수 없기 때문.

• state를 복사해 변경함수를 만들 때 deep copy를 해야 새로운 배열로 만들어짐.
• 스프레드 연산자 사용하기.

let [title, setTitle] = useState([
    "강남 맛집 TOP3",
    "장건강 지키는 방법",
    "독서실 비용 총정리",
  ]);

fuction changeTitle() {
	const newArr = [...title];
	newArr[0] = '여자 코드 추천';
	setTitle( newArr );
}

Component로 HTML 줄이는 법

• 컴포넌트는 대문자로 시작해야 함.

• 별도의 파일을 만들어 import 해주는 방식과, 단일 파일 내에 별도 function을 만들어 컴포넌트를 불러오는 방식이 있음.

• 만약 의미 없는 div를 상단에 사용하기 싫으면 fragment인 <></> 코드를 작성하면 됨.

단점

• state를 쓸 때 복잡해짐.
• 상위 component에서 만든 state를 쓰려면 props 문법을 이용해야 함.

어떤걸 component로 만들까?

• 반복출연하는 HTML 덩어리들.

• 자주 변경되는 HTML UI들.

• 다른 페이지 만들 때.