생활코딩 리액트

가독성재사용성유지보수npm run build하면 build라는 디렉토리가 생긴다. 그 안에 있는 index.html파일을 보면 공백이 전혀 없이 최적화되어 불필요한 데이터들을 전부 제거해서 로드한다.html 코드가 상당히 길어지면서 사람이 인지하기 어려울 정도가 됐을

위 코드에서 header 부분이 만약에 아주 긴 코드라면 하나의 다른 곳에서 정의해서 사용자가 정의한 태그의 이름 형태로 바꿔줄 수 있다.이런 식으로 컴포넌트들을 만들어 가면서 화면을 구성하는 방법이 리액트의 기본 활용방식인 것 같다.그리고 여기서 의문이 드는 점이 하

컴포넌트 내부적으로 사용되며 사용자는 알 필요도 없고 알아서도 안 되는것이 State이다. 이렇게 state를 씀으로써 얻게 되는 효용이 뭐가 있을까? 왜 쓰는 것일까?아직은 모르겠다.

html에서 이벤트를 만들 때는 태그 안에 onclick="" 이런 식으로 이벤트를 만들었다.하지만 리액트에서는 대문자가 바뀌니 유의해야 한다.그리고 "" 가 아니라 {} 로 감싸고 그 안에 실행할 함수를 정의하면 해당 함수가 클릭시에 실행된다.매개변수로 이벤트객체를

props 는 readOnly 이다. 그래서 수정이 불가능하다.state 는 setState() 를 통해서 변경이 가능하다.상위 컴포넌트인 App 클래스가 있다고 하고 그 안에 Content라는 하위 컴포넌트가 있다고 하면 App 클래스 내부에서 <Content>

updateContent 컴포넌트를 createContent 컴포넌트와 같은 형식으로 만들어준다.위에서 props의 값은 readonly 이기 떄문에 warning 에러가 발생한다. 이를 해결하기 위해서 props를 받아와서 state화 해준다. 위 코드가 속해있는 c