⏳ 2023. 5. 29. - 2023. 6. 4.
스타일과 DOM
리액트의 스타일은 props 데이터를 주는 것으로 작성할 수 있다.
js와 굉장히 유사하나, class를 className으로 주는 것이 관례이다.
js의 getElementById, querySelector처럼
리액트에는 useRef가 있다.
사용하고자 하는 요소에 ref값을 적용하는 것으로 요소를 선택할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<style></style>
</head>
<body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const rootEl = document.getElementById("root");
const App = () => {
const inputRef = React.useRef();
const divRef = React.useRef();
React.useEffect(() => {
inputRef.current.focus();
setTimeout(() => {
divRef.current.style.backgroundColor = "pink";
}, 2000);
}, []);
return (
<>
<input ref={inputRef} />
<div
ref={divRef}
style={{ backgroundColor: "brown", width: 300, height: 300 }}
></div>
</>
);
};
ReactDOM.render(<App />, rootEl);
</script>
</body>
</html>Error
js에는 try catch문을 사용하여 error에 대처할 수 있는데, 리액트는 에러에 어떻게 대응할까?
바로 ErrorBoundary 컴포넌트를 사용하는 것이다.
일부러 에러를 발생시키고, ErrorBoundary 컴포넌트를 사용해보자.
<!DOCTYPE html>
<html lang="en">
<head>
<style></style>
</head>
<body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const rootEl = document.getElementById("root");
class ErrorBoundary extends React.Component {
state = { error: null };
static getDerivedStateFromError(error) {
return { error };
}
render() {
const { error } = this.state;
if (error) {
return <p>Yes... Error Ocurred..</p>; // 에러가 있는 경우 보여질 화면
}
return this.props.children; // 에러가 없는 경우 원래 받은 children을 리턴
}
}
const Child = () => {
throw new Error("Something wrong..");
return <p>Hi! Child!</p>;
};
const App = () => {
return (
<>
<p>App..</p>
<ErrorBoundary>
<Child />
</ErrorBoundary>
</>
);
};
ReactDOM.render(<App />, rootEl);
</script>
</body>
</html>에러가 나올 수 있는 컴포넌트를 ErrorBoundary 컴포넌트로 감싸주는 것으로 에러에 어느 정도 대응할 수 있다.
에러 화면은 fallback을 통해 전달할 수도 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<style></style>
</head>
<body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const rootEl = document.getElementById("root");
class ErrorBoundary extends React.Component {
state = { error: null };
static getDerivedStateFromError(error) {
return { error };
}
render() {
const { error } = this.state;
if (error) {
return this.props.fallback; // 에러가 있는 경우 보여질 화면
}
return this.props.children; // 에러가 없는 경우 원래 받은 children을 리턴
}
}
const Child = () => {
throw new Error("Something wrong..");
return <p>Hi! Child!</p>;
};
const Fallback = () => {
return <p>Hi I am a fallback</p>;
};
const App = () => {
return (
<>
<p>App..</p>
<ErrorBoundary fallback={<Fallback />}>
<Child />
</ErrorBoundary>
</>
);
};
ReactDOM.render(<App />, rootEl);
</script>
</body>
</html>'카카오테크캠퍼스 > 필수과정' 카테고리의 다른 글
| [카카오테크캠퍼스 9주차] Vanilla JS로 구현하기 (0) | 2023.06.06 |
|---|---|
| [카카오테크캠퍼스 8주차] React 기초: State 끌어올리기 (0) | 2023.06.01 |
| [카카오테크캠퍼스 8주차] React 기초: Hooks (0) | 2023.05.31 |
| [카카오테크캠퍼스 8주차] React 기초: 리렌더링, 이벤트 핸들링 (0) | 2023.05.30 |
| [카카오테크캠퍼스 8주차] React 기초: 시작하기 (0) | 2023.05.29 |
