C-log

이번 포스팅에서는 useEffect로 특정 상태가 변화 되었을 때 React가 랜더링이 될 수 있게 할 것이다. 먼저 아래 코드를 살펴보자 import { useEffect } from "react"; export default function SubApp() { function onClick() { console.log("Click!"); } console.log("I run all the time"); useEffect(() => { console.log("Call The Api.."); }, []) return ( useEffect Click me ) } SubApp.js:7 I run all the time SubApp.js:9 Call The Api.. //클릭시 호출 되는 함수 SubApp.j..

이번 시간에는 propsTypes에 관해서 포스팅을 해볼 것이다. propTypes은 React에서 컴포넌트의 props에 대한 유형을 검사하고 정의하는 데 사용되는 기능이다. 이는 코드의 안정성을 높이고 잘못된 사용 또는 전달된 데이터에 대한 오류를 미리 방지하는데 도움이 된다. 이는 TypeScript와 비슷한 역할을 하는 것이지만 아직 propsTypes에 익숙하지 않아서 조금은 잘 모르겠다. 우선 현재 우리 CDN을 이용해서 코드를 작성하기에 porpsTypes를 사용하려면 CDN을 추가해야한다. 아래 코들르 추가하면 된다. 이를 추가하고 아래 코드를 작성하면 된다. function Btn({ text, fontSize = 30 }) { console.log(text, "was Rendered")..

이번 포스팅에서는 재활용 했던 컴포넌트의 render를 고려해서 코드를 작성해 볼 것이다. 지난 포스팅에서 몇 번이나 말 했듯이 React는 렌더링으로 초기 로딩 속도가 지연되기에 컴포넌트를 잘 분리해야한다 했다. 이를 개선하기 위해서는 memo라는 Hook을 사용하는데 이를 사용하지 않았을 때의 코드와 결과를 살펴보면 아래와 같다. DOCTYPE html> ... function Btn({ text, onClick }) { console.log(text, "was Rendered") return ( {text} ); } function App() { const [value, setValue] = React.useState("Save Changes"); const changeValue = () => se..

이번 포스팅에서는 props에 관해서 포스팅할 것이다. 이제 우리는 React의 간단한 동작원리와 state의 역할이 무엇인지 잘 알것이다. 이제는 컴포넌트를 나누어서 각 컴포넌트들에게 값을 다르게 전달 해주는 역할을 하는 props를 활용 해야 할 때이다. 얼핏 보기에는 일반적인 함수와 같아 보이겠지만 쓰임세와 활용도들은 조금씩 다르다. 우선 일반 함수와 컴포넌트는 재활용을 하기 아주 적합하다는 것이다. 하지만 일반 함수는 코드 내에서만 그러하다 컴포넌트는 UI와 깊게 연결이 되어 있다. 특히 css를 반복적으로 사용하기 위해서 이전에는 Html에 의존 해야 했지만 컴포넌트에 의존하게 되면서 개별적인 css를 다루게 되는 것이다. 아래 코드는 간단한 컴포넌트를 props와 활용한 코드이다. DOCTYP..

이전 시간에 우리는 useState가 동작되는 원리와 useState를 통해서 React DOM이 어떻게 동작하는지 알 수 있었다. 잠시 복기를 해본 다면 UI에서 변동 상항이 있으면 ReactDOM의 render를 통해서 변화된 UI를 변동 시켜야한다. 하지만 useState를 사용하지 않고 ReactDOM에 있는 render함수를 사용해서 변화가 필요한 함수나 부분에 매번 re-render를 하기엔 너무 불편하고 효율적이 못하다 그래서 상태가 변화 되었다는 것을 감지하고 이를 ReactDOM에 인지를 시켜주는 useState Hook을 사용해서 특정 상태가 변화 되었을 때 해당 컴포넌트가 re-render가 될 수 있는 것이다. 다시 말하지만 useState는 상태를 관리하는 Hook일 뿐 rende..