ch2 설치
node_module : 프로젝트 실행하는데 필요한 디펜던시 모듈 존재,git에는 올리지 않는다
package.json : node_module이 어떻게 구성되어 있는지 적혀있다
public-index.html : <div id="roo"></div> ->여기서 리액트 코드로 만들어진게 실행된다
src->대부분 여기서 작업이 이루어진다
Hot Module Recplacement(HRM) : App.js에서 수정하면 바로 반영되어진다
npm start || ctrl + c
ch3 JSX
App.js에서 컴포넌트를 만들면 index.js에서 임포트한 뒤 화면을 그린다
App.js에서의 컴포넌트는 함수로 이루어져있으며 첫글자는 대문자이다
컴포넌트 함수 == JSX(JavaScriptXML), 즉 자바코드안에 html이 존재한다
return(const age= 13; <h1>Hello, {name}.</h1>);
이런식으로 하면 변수 사용 가능하다
ch4 컴포넌트
src안에 component폴더 만들고 새로운 컴포넌트 넣어두자
jsx는 하나의 태그만 사용할 수 있기 때문에
컴포넌트에서 다른 컴포넌트를 사용하고 싶으면 <div>로 묶어서 쓰자
ch5 CSS 작성법
인라인 스타일 사용 : jsx안에서 사용, 객체 형식으로 작성해야 한다
index.css, App.css : : 전체 파일에 적용
css module을 사용해서 각 컴포넌트에 특화되어있게 사용하자
componentName.module.css : 파일 만들어서 사용
import styles from... : component에서 css모듈 임포트 하는 방법
임포트 하면 styles라는 객체가 생기는것
ch6 이벤트 처리
export default function Hello(){
function showName(){console.log("yj");}
function showAge(age){console.log(age);}
return (
<div>
<h1>Hello</h1>
<button onClick={showName}>Show name</button>
<button onClick={()=>{showAge(30)}}>Show age</button>
</div>
)
}
//함수를 먼저 구현하고 사용
//매개변수가 필요하면 화살표 함수처럼 사용
//만약 함수이름대신 functionName() 이렇게 사용하면 return값이 나온다ch7 state,useState
state = 컴포넌트가 가지는 속성값
리액트는 state의 변화가 있을때만 ui를 변경하면 된다
const [name,setName] = useState("default");
useState는 배열을 반환하는데 name은 state, setName은 state를 바꿔주는 함수
예제)
import { useState } from "react";
//반드시 임포트를 해야한다
export default function State(){
// let name = "yj";
const [name,setName] = useState("yj");
function changeName(){
setName(name === "yj" ? "jane" : "yj"); //yj -> jane, jane -> yj
}
return(
<div>
<h1>state</h1>
<h2>{name}</h2>
<button onClick={changeName}>Change1</button>
<button onClick={()=>{changeName()}}>Change2</button>
<button onClick={()=>{setName(name === "yj" ? "jane" : "yj");}}>Change3</button>
</div>
)
}
ch8 props
