[nomad coder] 리액트 기초 2 import React from 'react'; import ReactDOM from 'react-dom/client'; import reportWebVitals from './reportWebVitals'; function Btn({text, big}){ return {text} ; } function App(){ return( ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render() reportWebVitals(); 컴포넌트를 재사용 하는 방법에 대해 알아보았다. 컴포넌트의 매개변수를 설정하고, 컴포넌트를 사용하면서 인수로 text="value" 를 넘겨주면, 해당 인수를 사용할 수 있다. function.. 2022. 11. 24. [nomad coder] 리액트 기초 1 total click : 0 click me! function Counter(){ const [count, setCount] = React.useState(0) const onClick = () => { setCount((current) => current + 1) } return( Total click : {count} Click me! ) } Vanilla JS를 통해 코드를 구성한 코드와, 리액트를 이용해 구성한 코드를 통해 리액트의 강점을 알아보는 시간을 가졌다. 리액트 코드는 생략된 부분이 많지만(렌더링하는 부분이 생략돼있다), useState와 같은 훅이나 라이브러리의 특성상 편리한 기능이 많았다. 코드를 작성하는 방식에서, JSX 형식으로 코드를 작성하여 JS안에서 마치 HTML을 작성하는 .. 2022. 11. 22. 이전 1 2 다음
