mingsayz blog

리액트 – useEffect 라이프사이클

useEffect 란 ? useEffect() 함수는 React component가 렌더링 될 때마다 특정 작업(Sied effect)을 실행할 수 있도록 하는 리액트 Hook이다. 여기서 Side effect는 component가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 뜻한다. 이러한...

Continue reading...

리액트 – useState 유의할 점

콜백함수 형태로 state 업데이트 버튼을 한번 클릭했을때 state의 count가 5씩 증가하는 콜백함수를 만들어보자. 위와 같이 처리하면 콜백함수 실행시 5씩 증가할까 ? 아니다. 자바스크립트 클로저와 관련이 있는데, 콜백함수가 전달될때 현재상태를 스냅샷을 한다....

Continue reading...

리액트 – 이벤트 핸들링

버튼 클릭이벤트 핸들링 자바스크립트와 동일하게 button 등에 클릭이벤트를 발생시킬수 있다. 인라인 코드로 js를 바로 실행할 수 있으며, 미리 정의해두고 쓸 수도 있다. 이벤트 – state 변경 핸들링 리액트 컴포넌트는 변경 가능한...

Continue reading...

CSR (Client Side Rendering)

처음 yarn create react-app 이후, yarn start 로 열어보면 아래와 같이 index.html와 bundle.js 등등이 로드되는것을 확인 할 수 있다. index.html 을 살펴보면, <head>에는 seo를 위한 메타 태그들이 있고, body에는 id가 root라는...

Continue reading...