🥬 상추의 공간

Introduction state를 변경하면 모든 component는 다시 실행되고 모든 code들도 다시 실행된다. const App = () => { const [counter, setCounter] = React.useState(0); const onClick = () => setCounter((current) => current + 1); console.log("call an api"); return ( {counter} Click me ); }; 리렌더링 될 때마다 반복 실행되어도 괜찮은 코드도 있을 테지만, 컴포넌트가 처음 render 될 때만 코드가 실행되길 원할 수도 있다. 예를들어, API로 외부 데이터를 가져올 때 컴포넌트 처음 렌더링되는 그 순간에만 API 요청을 하고 이후에 stat..

배웠던걸 기반으로 useState를 이용해 단위변환 기능을 만들어보자. 먼저 input에 입력한 값이 화면에 실시간으로 보이도록 만들어보자. onChange를 통해 사용자가 다른 값을 입력할 때마다 value 업데이트 시킨다. const App = () => { const [minutes, setMinutes] = React.useState(0); const onChange = (e) => { setMinutes(e.target.value); }; return ( Super Converter Minutes You want to convert {minutes} Hours ); }; input의 value를 연결시켜주는 이유는 input 값을 외부에서 수정해주기 위해서다. label에서 for은 js용어가 ..

Understanding State state는 기본적으로 데이터가 저장되는 곳이다. 아래 코드는 별로 좋지 않은 방법이다. const root = ReactDOM.createRoot(document.getElementById("root")); let counter = 0; function countUp() { counter += 1; } const Container = () => ( Total clicks: {counter} Click me ); root.render(); // 렌더링 컴포넌트는 화면 페이지를 처음 로드했을 때 딱 한번 렌더링되므로 그 이후로는 어떤 작업을 해도 UI가 업데이트되지 않는다. 그래서 button을 눌러도 counter 변수 자체는 증가하지만 UI는 계속해서 0을 표시한다...

React JS 는 ui를 interactive(상호작용)하게 만들어준다. Before React Total clicks: 0 Click me React를 사용하지 않고 바닐라 JS로 코드를 짠 경우를 보자. (1)HTML을 만들고 (2)Javascript에 가져와 (3)event를 감지하고 (4)데이터를 업데이트한 뒤 (5)HTML을 업데이트한다. 계속 이런 방식으로 작업하면 복잡하고 비효율적이다. React Element 이번엔 React JS로 element를 생성하는 방식으로 해볼 것이다. 이를 사용하기 위해서는 react, react-dom를 import해야 한다. React JS는 HTML을 직접 작성하지 않고 JS 코드를 사용한다. const root = document.getElementB..