어쨌든 공부하는 블로그

Effect 특정 코드들이 처음 컴포넌트를 렌더링 할 때에만 실행되고, state가 변경되어 리렌더링 할 때에는 실행되지 않게 하기 위해 사용할 수 있다 function App() { const [counter, setValue] = useState(0); const onClick = () => setValue((prev) => prev + 1); useEffect(() => { console.log("Call the API."); }, []); return ( {counter} click me ); } 위와 같이 useEffect의 첫번째 argument에 함수를 넣어두면, 첫번째 render 시점에만 동작하고, state가 변경되어 리렌더링되어도 여러 번 실행되지 않는다 딱 한 번만 실행되는 것이다 ..

Props * Props: 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법(인자) function SaveBtn() { return Save Changes; } function ConfirmBtn() { return Confirm; } function App() { return ( ); } 기존의 방식대로라면 버튼을 여러 개 만들 때, 각각 컴포넌트로 만들어주어서 렌더링한다 하지만 각각의 버튼에 공통된 속성들(ex. style)이 들어간다고 가정한다면, 하나의 수정사항이 생길 때마다 모든 버튼 컴포넌트를 수정해야 하는 문제가 생긴다 function Btn(props) { return ( {props.text} ; } function App() { return ( ); } 직접 생성..

State const root = document.getElementById("root"); let counter = 0; const Container = () => ( Total clicks: {counter} Click me ); ReactDOM.render(, root); content를 작성하던 위치에 중괄호를 열고 변수를 담아줄 수 있다 변경 사항을 다시 HTML 문서에 반영하고 싶다면 전체를 재렌더링해 주면 된다 function App() { const data = React.useState(); const counter = data[0]; const modifier = data[1]; return ( Total clicks: {counter} Click me ); } 위와 같은 방식으로 us..

CreateElement const root = document.getElementById("root"); const h3 = React.createElement( "h3", { id: "title", onMouseEnter: () => console.log("mouse enter"), }, "Hello I'm a title" ); const btn = // 생략 const container = React.createElement("div", null, [h3, btn]); ReactDOM.render(container, root); 가장 기본적인 방식으로, createElement(HTML tag, property, content)를 통해 엘리멘트를 만들어내어 랜더 할 수 있다 하지만 사실상 쓸 일 없..