react

top , sidebar 같은 태그들을 Component라 함\---> 가독성을 획기적으로 늘린다.\---> 재사용성\---> 유지보수남이 만든 component를 사용할 수 있게 된다

그 렌더함수가 다시 호출됨에 따라 그 랜더 하위에 있는 랜더함수들도 싹 호출이 된다. (화면 다시 그려짐)state 기본값을 뜻함 props나 state의 값이 바뀌면 해당되는 render 함수가 호출되도록 약속되어 있음

state 를 변경하려면 setState 를 사용한다this.setstate({ mode : 'welcome' }) 이러면 모드를 웰컴으로 바꾼다 라는 뜻this.setstate = 'welcome' 이런식으로 사용하면 안됨. this.setstate({mode:\~~

class 에서 state 사용 함수방식은 사용을 못했다.그러나 최신 리액트에서는 hook 도입 함수방식에서도 상태 다룰 수 있고 라이프 사이클 다룰 수 있음.hook 으로 인해 function 스타일 급부상

sideEffect 처럼 기존의 컴포넌트에 영향을 주진 않지만 누르면 document.title 이 바뀐다든지 이런 사이드이펙트 ( componentDidmount, componentDidupdate) 같은 것들을 useEffect를 사용해 해결 할 수 있고 사용법은

일단 npx create-react-app react-router-dom-example (제목)으로 생성을 해준다

jsx 기본 문법하나의 엘리먼트로 감싸기js코드 적용시 {} 감싸기jsx 내부에서 if문 사용 불가 (삼항연산자 사용)클래스 이름 class 말고 className= 적용

링크