[새싹x코딩온] 풀스택 개발자 부트캠프 과정 11 주차-2 React
React Event📌
리액트에서는 Javscript의 onclick, onMousedown 등의 이벤트 핸들러를 별도로 제공하는데 (기능은 동일함) 다만 표기방법이 약간 틀리다 예로 onclick 은 onClick으로 카멜 케이스 표기명으로 사용한다 그리고 함수를 호출법도 약간 틀린데 onclick="func()" 가 아닌 onClick={func} 으로 JSX문법을 사용하여 변수를 호출하듯 사용한다
const LifeCycleFunc = () => {
const [number, setNumber] = useState(0);
const [visible, setVisible] = useState(true);
const changeNumber = () => {
setNumber(number + 1);
};
const changeVisible = () => {
setVisible(!visible);
};
return (
<>
<button onClick={changeNumber}>PLUS</button>
<button onClick={changeVisible}>ON/OFF</button>
<Mycomponent number={number} />
</>
);
};
위 코드에선 Button 태그의 onClick 이 이벤트 핸들러라고 할 수 있다
React Map📌
리액트의 맵이란 Javascript의 for문과 동일한 기능을하는데 반복문과는 약간 다르게 key 값이 존재한다 그 이유는 리액트가 컴포넌트화 구조이기 때문인데 여기서 고유한 key 값이 없다면 생성한 항목 구분하기 어려워지기 때문에 반드시 키 값을 전달하여 관리를 하는 것이 안정적입니다
const fakePosts2 = [
{
id: 1,
title:
"sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
body: "quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto",
},
{
id: 2,
title: "qui est esse",
body: "est rerum tempore vitae sequi sint nihil reprehenderit dolor beatae ea dolores neque fugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis qui aperiam non debitis possimus qui neque nisi nulla",
},
{
id: 3,
title: "ea molestias quasi exercitationem repellat qui ipsa sit aut",
body: "et iusto sed quo iure voluptatem occaecati omnis eligendi aut ad voluptatem doloribus vel accusantium quis pariatur molestiae porro eius odio et labore et velit aut",
}
];
function PostList() {
return (
<>
<h2 style={{ textAlign: "center" }}>{posts}</h2>
{fakePosts.map((el, i) => {
return (
<div style={{ textAlign: "center" }} key={el.id}>
<span>No. {el.id}-</span>
<span>{el.title}</span>
<p>{el.body}</p>
</div>
);
})}
</>
);
}
위의 코드에서는 객체 배열을 순회하며 최상위 root 태그(부모)에 고유한 key값을 주고 그 다음 el.id, el.title, el.body 로 객체의 값에 접근하여 값을 출력합니다
React Ref📌
Ref는 리액트에서 Javscript의 태그 선택자 역할을 한다고 봐도 무방한데 다만 차이점이 있다면 변수의 역할도 동시에 한다는 것입니다 Ref을 사용하기 위해선 useState와 동일하게 useRef를 import 해주어야만 하며 16.8 이후에 추가된 훅 업데이트에서 함수형 컴포넌트에서도 사용할 수 있게 변경되었습니다
import { useRef, useState } from "react";
// DOM 요소를 선택하기 위한 ref
export function RefFunc1() {
// ref 객체만들기
const inputRef = useRef();
// ref.current 에 접근해서 원하는 작업 진행
const handleFocus = () => {
console.log(inputRef.current.value);
inputRef.current.focus();
};
const handleDisabled = () => {
inputRef.current.disabled = true;
};
return (
<div>
{/* 선택하고싶은 태그에 ref 전달 */}
<input type="text" ref={inputRef} />
<button onClick={handleFocus}>focus</button>
<button onClick={handleDisabled}>disabled</button>
</div>
);
}위 코드에선 input 태그에 리액트 ref 객체가 담긴 ref변수를 할당 한 뒤 변수.current 로 접근하면 input 태그를 가리키고 있는 것을 알 수 있습니다
// 변수처럼 사용하는 ref
export function RefFunc2() {
const ref = useRef(1);
const [state, setState] = useState(1);
let variable = 1;
const plusRef = () => {
ref.current += 1;
console.log("ref", ref.current);
};
const plusState = () => {
setState(state + 1);
console.log("state", state);
};
const plusVar = () => {
variable += 1;
console.log("var", variable);
};
return (
<div>
<h4>{ref.current}</h4>
<button onClick={plusRef}>Plus ref</button>
<h4>{state}</h4>
<button onClick={plusState}>Plus state</button>
<h4>{variable}</h4>
<button onClick={plusVar}>plus variable</button>
</div>
);
}Ref은 DOM 요소만 가리키는것이 아닌 변수처럼 사용할 수 도있는데 최고 ref 변수 선언 시 useRef(값)으로 초기화하면 useState(값)처럼 정상적으로 값이 초기화된 걸 알 수 있습니다 다만 주의사항이 있다면 Ref는 State처럼 값이 변할 때마다 다시 렌더링 하지 않습니다 그래서 다른 setState가 업데이트되거나 useEffect가 변경될 때 같이 변경됩니다
React Lifecycle📌
리액트의 기능들 중에서도 하이라이트 라고 불리는 생명주기라는 기능이 존재하는데 쉽게 말하자면
최초 렌더링시 동작, 컴포넌트 업데이트 시 동작, 컴포넌트가 사라질 때 동작 이렇게 3개 상태를 구분하여 동작하게 만들 수 있다
// Mount 최초 렌더링이 된 후 실행되는 작업
useEffect(()=>{
},[])
// Update 컴포넌트가 다시 렌더링 될때 실행되는 작업
useEffect(()=>{
})
//Unmount 컴포넌트가 비활성화될때 실행되는 작업
useEffect(()=>{
return ()=>{
}
,[])