1.JSX 란?
JavaScript + XML/HTML = 을 합쳐 JSX라고 한다.
JSX = A syntax extension to JavaScript
JSX 코드
const element = <h1>Hello, world</h1>;왼쪽은 javascript + 오른쪽 html
1-1.JSX의 역할
내부적으로 xml을 js코드로 변경해준다.
- JSX를 사용 안한 코드
React.createElement('div', null, `Hello,${name}`);- JSX를 사용한 코드
const Element = <div>Hello, {name}</div>- JSX를 사용하지 않은 코드
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')
);- JSX를 사용한 코드
class Hello extends React.Component{
render(){
return <div>`Hello ${this.props.toWhat}`</div>;
}
}2.State
State란? 컴포넌트에 대한 상태를 의미한다.
앞에 use가 써있으면 state의 Hook이다.
2-1.useState
- useState 사용법
먼저 상태를 관리하는 state 를 배열의 첫번째로 정해주고, 해당 state 를 변경 할 수 있는 함수를 두번째로 지정
import { useState } from "react";
const [스테이트이름, 스테이트변경함수] = useState(초기값);- useState를 활용해 카운트 버튼 만들기
따봉 버튼을 누르면 +1씩 증가하게 만들기
10이 넘어가면 따봉 이모티콘에서 ->😎로 변경되게 만들기
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>
)
}3.Ref
3-1.useRef
- useRef 를 사용하면 참조하고자 하는 DOM 요소에 ref 속성을 주고 해당 태그의 변화를 감지하거나 DOM 요소를 컨트롤 할 수 있다.
- 보통은 컴포넌트에 존재하는 인풋 태그의 값을 받거나, JS에서 DOM 요소를 관리하던 역할을 해준다.
getElementById, querySelector같은 DOM Selector 함수를 사용해서 DOM 을 선택해주는 react Hook 함수이다.- 단
.current까지 선택해주어야 한다.
[input value값 그대로 받아보기]
- useRef 먼저 import해서 불러오기
import { useRef,useState } from 'react';- 변수에 useRef 선언하기
const inputValue = useRef();- setText 변경할 버튼에 current로 value값 선언하기
const onChangeRef = () => {
setText(inputValue.current.value);
};- html라인 확인
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>
);
}
4.useEffect
useEffect 는 리액트 컴포넌트가 렌더링 될 때 or 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 Hook
- [Mount] 화면에 첫 렌더링
- [UnMount] 화면에 사라질 때
- [UpDate] 특정 props가 바뀔 때
- 실행 방법
import react, { useEffect } from "react"; // useEffect 불러오기
4-1.[Mount] 1 - 화면에 첫 렌더링 될 때
useEffect(() => {
//필요한 useEffect 실행
console.log('컴포넌트가 화면에 나타남');
return () => {
//useEffect의 return문으로 UnMount시킨다.
console.log('컴포넌트가 화면에서 사라짐');
};
});4-1.[UpDate] 2- 특정 props가 바뀔 때마다 [value]
useEffect(() => {
console.log("⌨ 인풋 입력 시에만 실행되는 useEffect");
}, [text]) //특정 변수가 바뀔 때만 실행 [원하는 값 선언]4-1.[Mount] 3- 첫 렌더링 할 때만 실행하고 싶을 땐 []
[ ]변수를 넣지않고 빈배열로만 선언하면 어떻게 될까?
useEffect(() => {
console.log("맨 처음 렌더링될 때 한 번만 실행");
},[]); // 처음만 렌더링5.useMemo
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>
</>
);
}
