JSX

문자도 HTML도 아닌 JavaScript의 확장 문법

const root = document.getElementById('root');
const App = () => {
  return <>
    <h1>Title</h1>
  <>;
}
ReactDOM.render(<App />, root);

React.Fragment

태그를 감싸주는 용도로 실제로는 랜더링 되지 않는다.

const rootElement = document.getElementById('root);
const element = (
	<React.Fragment>
  		<h1>안녕</h1>
  		<h3>난 민이야.</h3>
  	</React.Fragment>
);
ReactDOM.render(element, rootElement);

위 코드는 아래 코드와 동일하다.

const rootElement = document.getElementById('root);
const element = (
	<>
  		<h1>안녕</h1>
  		<h3>난 민이야.</h3>
  	</>
);
ReactDOM.render(element, rootElement);

이벤트

카멜케이스로 작성

onClick, onMouseOver ...

const root = document.getElementById('root);
const handleClick = () => alert('pressed');
const element = 
  <button 
    onClick={handleClick}
	onMouseOut={()=>{alert('bye)}}
  >
  버튼
  </button>
ReactDOM.render(element, root);

useState

컴포넌트 상태 관리

리액트에서 제공하는 상태값을 관리해주는 훅

const [keyword, SetKeyword] = React.useState("");
const [typing, SetTyping] = React.useState(false);
// 위와 같이 초기 상태값, 설정할 상태값을 지정

const keywordState = React.useState("");
const keyword = keywordState[0];
const setKeyword = keywordState[1];
// 위 코드와 동일

상태값이 크거나 해서 가져오는데 시간이 걸린다면
arrow 함수로 리턴해주면 시간이 걸려도 상태값을 가져온다
(lazy initialize)

const [keyword, SetKeyword] = React.useState(() => {
	return window.localStorage.getItem("keyword");
});

setState의 첫번째 인자는 이전 값이다.

const [show, setShow] = React.useState(false);
function handleClick() {
	setShow(prev => !prev);
}

useEffect

컴포넌트 사이드이펙트 관리

React.useEffect 호출 순서대로 반응

- 특정 요소가 바뀔 때에만 반응

React.useEffect(() => {
	window.localStorage.setItem("keyword");  
}, [keyword]);
// 두 번째 인자로 준 dependency array의 keyword가 바뀔 때에만 
// 첫 번째 인자인 함수를 실행한다.

- 모든 변화에 반응

React.useEffect(() => {
	window.localStorage.setItem("keyword");  
});
// 두 번째 인자로 dependency array를 입력해주지 않으면
// 모든 변화에 반응해 함수를 실행한다.

- 컴포넌트가 처음 랜더링될 때에만 반응

React.useEffect(() => {
	window.localStorage.setItem("keyword");  
}, []);
// 두 번째 인자로 빈 dependency array를 입력해주면
// 컴포넌트가 처음 랜더링 될 때만 실행된다.

커스텀 이벤트

반복적으로 사용되는 함수를 커스텀이벤트로 생성한다.

function useLocalStorage(itemName, value = "") {
	const [state, setState] = React.useState(() => {
    	return window.localStorage.getItem(itemName) || value;
    });
  
  React.useEffect(() => {
  	window.localStorage.setItem(itemName, state);
  }, [state]);
  
  return [state, setState];
}

const App = () => {
	const [keyword, setKeyword] = useLocalStorage("keyword");
  	const [result, setResult] = useLocalStorage("result");
  	const [typing, setTyping] = useLocalStorage("typing", false);
}