리액트 4

React 스터디노트 #3. 이벤트

this.state = { mode: 'welcome', subject: //... //... } render() { if(this.state.mode === 'welcome'){ //... } else if(this.state.mode === 'read'){ //... } } - props의 값이나 state의 값이 바뀔 때마다 그 컴포넌트의 render()함수가 다시 호출되고, 그리고 그 하위에 있는 컴포넌 트들의 render()도 호출되기 때문에 화면이 싹 다시 그려진다. - console.log('...'); 하면 콘솔에 프린트를 할 수 있다. - debugger; 를 만나면 브레이크 포인트 쓰듯이 실행 시 저 부분에서 멈춘다. - HTML로 보이지만 이건 유사 HTML이다. 규칙을 따라야한다. ..

Study note/React 2020.11.30

React 스터디 노트 #2. State

- state는 props와 함께 가장 헷갈리는 부분 - component가 실행될 때 초기화를 담당하는 부분: constructor() constructor(props){ super(props); this.state = { subject:{title:'WEB', sub:'World Wide Web'} } } - 외부에서 볼 수 없게 은닉하는 방법이다. - 상위 component의 state 값을 하위 component의 props로 전달할 수 있다. - state는 바꿀 수 있지만 props는 전달 받기만 하고 직접 바꿀 수는 없다. // App의 consturctor 안 this.state = { contents: [ {id:1, title: 'HTML', desc: 'HTML is blar blar..

Study note/React 2020.11.27

React Study Note #1. egoing 이고잉님 강의로 시작하기

[Component 만들기] - App.js에 있는 class App에서 시작한다. 마치 main() 같은 건가? - html과 js처럼 작동을 하지만 굉장히 가독성이 좋다. - create-react-app이 알아서 변환해준다고 생각하면 된다. 깔끔히 정리해주는 역할. - 다들 props와 state에서 절망을 많이 하는 것 같다. 헷갈리는 부분인 것 같으니 집중해야겠다. {this.props.title} {this.props.sub} - 이렇게 하면 customize한 나만의 props를 속성으로 사용할 수 있다. 오픈튜토리얼스 이고잉님 강의 https://opentutorials.org/module/4058/24737 컴포넌트 제작 - React 수업소개 React의 핵심 기능인 컴포넌트를 제작하는..

Study note/React 2020.11.25