JavaScript + XML/HTML = 을 합쳐 JSX라고 한다.
JSX = A syntax extension to JavaScript
JSX 코드
const element = <h1>Hello, world</h1>;
왼쪽은 javascript + 오른쪽 html
내부적으로 xml을 js코드로 변경해준다.
React.createElement('div', null, `Hello,${name}`);
const Element = <div>Hello, {name}</div>
class Hello extends React.Component{
render(){
return React.createElement('div', null, `Hello ${this.props.toWhat}`);
}
}
ReactDom.render(
React.createElement(Hello, {toWhat:'World')',null),
document.getElementById('root')
);
class Hello extends React.Component{
render(){
return <div>`Hello ${this.props.toWhat}`</div>;
}
}
State란? 컴포넌트에 대한 상태를 의미한다.
앞에 use
가 써있으면 state의 Hook이다.
import { useState } from "react";
const [스테이트이름, 스테이트변경함수] = useState(초기값);
import React, { useState } from 'react'
export default function Counter2() {
const [counter,setCounter] = useState(0)
return (
<div>
<span onClick={ () => {setCounter(counter+1)} }>{counter}{counter >= 10 ? "😎":"👍"}</span>
</div>
)
}
- useRef 를 사용하면 참조하고자 하는 DOM 요소에 ref 속성을 주고 해당 태그의 변화를 감지하거나 DOM 요소를 컨트롤 할 수 있다.
- 보통은 컴포넌트에 존재하는 인풋 태그의 값을 받거나, JS에서 DOM 요소를 관리하던 역할을 해준다.
getElementById, querySelector
같은 DOM Selector 함수를 사용해서 DOM 을 선택해주는 react Hook 함수이다.- 단
.current
까지 선택해주어야 한다.
import { useRef,useState } from 'react';
const inputValue = useRef();
const onChangeRef = () => {
setText(inputValue.current.value);
};
return (
<div>
<h1>{text}</h1>
<input ref={inputValue} onChange={onChangeRef} />
</div>
);
import { useRef, useState } from "react";
//useRef,useState 불러오기
export default function TestRef() {
// useState 선언
const [text, setText] = useState("안녕하세요");
// 기존 DOM
const onChangeText = (e) => {
let inputText = e.target.value;
setText(inputText);
};
// Ref함수형 변경
const inputValue = useRef();
const onChangeRef = () => {
setText(inputValue.current.value);
};
return (
<div>
<h1>{text}</h1>
<input ref={inputValue} onChange={onChangeRef} />
</div>
);
}
useEffect 는 리액트 컴포넌트가 렌더링 될 때 or 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 Hook
import react, { useEffect } from "react"; // useEffect 불러오기
useEffect(() => {
//필요한 useEffect 실행
console.log('컴포넌트가 화면에 나타남');
return () => {
//useEffect의 return문으로 UnMount시킨다.
console.log('컴포넌트가 화면에서 사라짐');
};
});
useEffect(() => {
console.log("⌨ 인풋 입력 시에만 실행되는 useEffect");
}, [text]) //특정 변수가 바뀔 때만 실행 [원하는 값 선언]
[ ]변수를 넣지않고 빈배열로만 선언하면 어떻게 될까?
useEffect(() => {
console.log("맨 처음 렌더링될 때 한 번만 실행");
},[]); // 처음만 렌더링
useMemo는 컴포넌트를 최적화하는 대표적인 훅 중에 하나다.
import { useMemo } from 'react';
object는 객체타입이다.
일반 원시타입과는 다르게 값이 주소값으로 저장된다.
메모리 상의 주소가 다르게 저장되어 useEffect의 location은 변경이 되었다고 생각 할 수 있다. 이것을 해결해주려면 useMemo를 사용해야한다.
export default function UsingUseMemo() {
const [number, setNumber] = useState();
const [isKorea, setIsKorea] = useState(true);
const location = useMemo(() => {
return { where: isKorea ? '한국' : '외국' };
}, [isKorea]);
useEffect(() => {
console.log('useEffect 호출');
}, [location]);
return (
<>
<h1>숫자 증감</h1>
<input
type="number"
value={number}
onChange={(e) => setNumber((cur) => parseInt(e.target.value))}
/>
<br />
<h1>where are you?</h1>
<h1>위치 : {location.where}</h1>
<button onClick={() => setIsKorea((cur) => !cur)}>위치 변경 </button>
</>
);
}