01.React.js 환경설정
React를 사용하기 위해선 아래의 react와 react-dom를 import해줘야 한다.(어려운 방식으로 시작)
https://unpkg.com/react@17.0.2/umd/react.production.min.js
https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js
=> <script src="위 주소"></script>
react = library, interactive하게 만들어주는 원동력
react-dom = library or package, 모든 React Element들이 html body에 들 수 있도록 해준다.
02.React JS로 Element 만들기
01. element 생성 - const span = React.createElemnt("span", {id : "sexy-span",style : {color:"red"},content(내용));
└properties 자리
02. -element 출력 - ReactDOM.render(span,root);
└span을 root안에 넣어서 화면에 보여줘!
-const container = React.createElement("div",null, [span,btn]);
=> React JS는 유저에게 보여질 내용을 컨트롤할 수 있다. Js로 element를 생성하고 react가 그걸 html로 변환
vanilla
<script>
let counter = 0;
const button = document.querySelector("#btn");
const h3 = document.querySelector("h3");
function handleClick() {
counter = counter +1
h3.innerText = `Total clicks : ${counter}`
}
button.addEventListener("click", handleClick);
</script>
use React JS
<script>
const root = document.getElementById("root");
const h3 = React.createElement("h3"//html에 들어갈 tag,
{id:"title", //property가 포함된 object
(유효한 event) onMouseEnter:() => console.log("mouse Entered"),}, "Hello" //content);
const btn = React.createElement("button", {
onClick: () => console.log("im clicked"),
}, "Click Me");
const container = React.createElement("div",null, [span,btn]);
ReactDOM.render(container,root);
</script>
03.JSX
JS를 확장한 문법 js를 HTML처럼 => html문법으로 작성한 언어를 변환해줘야하는데 Babel사용
<script type="text/babel">
const root = document.getElementById("root");
const Title = () => <h3 id="title" onMouseEnter = {() => console.log("entered here")} >
Hello I'm a title
</h3>
const Button = () => //컴포넌트
<button style={{color:"red"}} //컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력 //하는 함수. =>리액트로 만들어진 앱을 이루는 최소한의 단위
onClick={() => console.log("im clicked")}
>Click me</button>
const Container = () =>
<div>
<Title /> // 내가 제작한 컴포넌트들은 대문자로 만들고 사용
<Button/> //소문자면은 HTML코드인지 안다.
</div>
ReactDOM.render(<Container />,root);
</script>
function render() {
ReactDOM.render(<Container />,root); 값이 바뀌면 리랜더링을 해줘야함
} react.js는 오로지 바뀐 것만 생성후 교체해주고 html은 전부 재생성한다.
const [counter, modifier] = React.useState(0); //data와 함수를 줌.([data,f]) 리액트에서 data를 저장할때 쓰는 기능
04.State
01.setState and state function
<script type="text/babel">
const root = document.getElementById("root");
function App() { ┌리렌더링 trigger
const [counter, setCounter] = React.useState(0); //data와 함수를 줌.
const onClick = () => {
setCounter(counter+1) //리렌더링을 일으켜줌. <- 첫번째 방법 - 직접 값 설정해주기
└setCounter((current) => current + 1); <- 현제 값이란걸 보장하고 있다.= 두번째방법- 함수 전달하기(safety)
};
//useState는 숫자형 data와 modifier함수를 렌더링 해줄 것이고 아래 코드로 리렌더링을 해줌
// └modifier함수를 이용해 컴포넌트의 state(data), 즉 어플리케이션의 데이터를 바꿀 때
컴포넌트는 새로운 값을 가지고 리렌더링이 되는 것이다. = 데이터가 바뀔때마다 컴포넌트를 리렌더링,UI refresh
02. Inputs and State
const [value, modifier] = React.useState(0);
const onChange = (event) =>{
console.log(event.target.value) //form을 다루는 방법
}
<label htmlFor ="minutes">Minutes</label>
<input
value = {minutes} input의 value를 연결해준 이유는 외부에서도 수정하기 위해서
id="minutes"
placeholder = "Minutes"
type = "number"
onChange = {onChange} /> onChange를 없애면 0으로 값이 고정되어 변하지 않는다.
const [flipped, setFlipped] = React.useState(false); boolean을 줘서 조건식처럼 사용도 가능하다/이지선다..?
disabled {flipped === false}
05.Props
일종의 argument라고 보면 된다.
component를 만들어서 사용할때 props를 설정해주고 component에 입력해주면 된다
ex)
const Btn = (props) =>{console.log(props.name)} return (<button>{props.text}</button>
const App = () => { return (<div> <Btn text = "Save" name ="Joseph" /> </div>
이런 식으로 Btn에 props를 설정해두고 App에서 Btn을 쓸때 props를 사용하면 편하다 (props)대신 ({name, text})로 할당해놓으면 {props.text}가 아닌 {text}만 적어도 된다.
React.memo = memorize => 기억해놨다가 변하면 리렌더링 되게 해주는 기능
06.EFFECTS
useEffect = useEffect(function,[]); : 함수를 한번만 실행.
useEffect(fuction,[state]) : state가 변할때만 실행.
useEffect( () => {if문 {function}}, [state] ); 식으로도 사용 가능
Cleanup - component가 파괴될 때 code를 실행할 수 있다.
function Hello() {
useEffect(function () {
console.log("hi");
return function () { => return을 사용해서 component를 숨기던지 쨋든 파괴할 때 return값을 출력.
console.log("bye");
};
}, []);
useEffect(() => {
console.log("hi :)");
return () => console.log("bye :(");
}, []);
return <h1>Hello</h1>;
}