Front-End

index.html index.html에다가

react 프로젝트 만들기 react 어플리케이션 실행

jsx 사용한 코드jsx 사용 안한 코드javascript 변수 사용하려면...formatUser라는 javascript함수 사용하려면...tag의 속성에 javascript코드 사용하려면...

리엑트 element는 자바 스크립트의 객체 형태로 존재ㄴ-> renderingindex.htmlindex.js

Clock.jsxindex.js1초당 계속해서 엘리먼트가 렌더링 되고 있는 부분을 볼 수 있다.

리엑트에서는 모든 페이지가 컴포넌트로 이루어져있고, 하나의 컴포넌트는 또 다른 컴포넌트의 조합으로 만들어 질 수 있다.컴포넌트는 props를 입력으로 받아서 React element를 반환한다.이렇게 보면 쉽게 생각해서 component를 객체지향으로 봤을때, clas

commnet component 생성Parent Component결과

만약 이렇게 코드를 짠다면,count가 업데이트 되지 않을것이다.따라서 useState를 사용해서 재렌더링 될때 업데이트를 시켜준다.useState() 사용법useState()를 사용한 코드이렇게 해서 useState()를 통해 재렌더링 될때 바뀌는 변수를 설정해주고

custom hook인 useCounter()hook 사용 부분

install viteyarn vite createyarnyarn run devinstall story book npx sb init --builder @storybook/builder-viteinstall styled-component yarn add styled-c

https://www.digitalocean.com/community/tutorials/react-error-boundariesimplementaionMyErrorBoundaryExample 클래스는 React.Component를 상속받아 Error Bound