개발의 시작과 끝

생활코딩 19.6강 - create 구현 : contents this.state.contents.push( {id:this.max_content_id, titie:_title, desc:_desc} ); 위의 방식은 기존에 있었던 contents의 배열에 데이터를 추가하는 방식으로 나중에 성능을 개선할 때 까다롭다. var _contents = this.state.contents.concat( {id:this.max_content_id, titie:_title, desc:_desc} ) 기존에 가지고 있었던 값이 새롭게 만들어진 데이터로 교체된다. 이 방법이 나중에 개선할 때에도 수정하기 쉽다. 참고 - www.youtube.com/watch?v=OpLMcB1nRkE&list=PLuHgQVnccGMCRv..

생활코딩 16.4,5 - 이벤트 bind, setState 함수 이해하기 .bind(this)를 하게 되면 컴포넌트 자체를 가리키는 객체를 함수 안으로 주입해서 함수 안에서 this는 그 객체가 되게 하는 것이다. 함수가 호출되면서 내부적으로 많은 일을 할 수 있도록 하는 것이 setState다. 그러므로 항상 state의 값이 바뀌면 setState로 바꿔줘야 한다. {this.state.subject.title} {this.state.subject.sub} 참고 - www.youtube.com/watch?v=o7Id7GMcuFo&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=22 - www.youtube.com/watch?v=PTRpJNMiMdA&list=PLuHg..

생활코딩 16.2강 - 이벤트 설치 HTML 태그들에 대해 이벤트를 걸 때 이벤트 태그가 가지고 있는 기본적인 동작 방법을 하지 못하게 해야 할 때가 있다. 그때 사용하는 명령어가 e.preventDefault(); 이다. {this.state.subject.title} {this.state.subject.sub} 참고 - www.youtube.com/watch?v=3h7MidkDTBU&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=20

생활코딩 16.1강 - 이벤트 state props 그리고 render 함수 render 함수를 통해 모드 변경 class App extends Component { constructor(props) { super(props); this.state = { mode:'read', welcome:{title:'welcome', desc:'Hello, React!!'}, subject:{title:'WEB', sub:'World wide web!'}, contents:[ {id:1, title:'HTML', desc:'HTML is for information'}, {id:2, title:'CSS', desc:'CSS is for design'}, {id:3, title:'JavaScript', desc:'J..

생활코딩 15.3강 - key state라고 하는 내부정보를 사용하고 자식에게 전달할 때는 props를 통해 전달한다. 리스트 항목을 쓸 때는 key를 사용한다. 이렇게 state와 props를 사용하면 데이터를 수정할 때 파일을 열지 않아도 바로 쓸 수 있다. App.js class App extends Component { constructor(props) { super(props); this.state = { subject:{title:'WEB', sub:'World wide web!'}, contents:[ {id:1, title:'HTML', desc:'HTML is for information'}, {id:2, title:'CSS', desc:'CSS is for design'}, {id:3,..

생활코딩 15.1,2강 - state props는 사용자에게 중요한 정보이다. props 값에 따라서 내부 구현에 필요한 데이터들을 state라고 한다. state를 사용하면 컴포넌트 내부적으로 사용하는 것들이나 외부에서 알 필요가 없는 정보들을 철저하게 숨길 수 있다. class App extends Component { constructor(props) { super(props); this.state = { Subject:{title:'WEB', sub:'World wide web!'} } } render() { return ( ); } } 참고 - www.youtube.com/watch?v=rOpg2KUPW2M&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=16 ..

생활코딩 12강 - props props를 받아서 그것을 바탕으로 서로 다른 결과를 만들 수가 있다. class Subject extends Component { render() { return ( {this.props.title} {this.props.sub} ); } } class Content extends Component { render() { return( {this.props.title} {this.props.desc} ); } } class App extends Component { render() { return ( ); } } 참고 - www.youtube.com/watch?v=pPCC2JWbPgk&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=13

생활코드 11강 - 컴포넌트 만들기 리액트에서 컴포넌트는 웹 문서에서 어떠한 내용을 보여주기 위한 기본적인 단위로 자바스크립트 함수와 흡사하다고 보면 된다. 또한 이러한 컴포넌트는 props를 입력으로 받아서 리액트 요소를 반환하는 형태로 동작한다. 컴포넌트를 바라보는 첫 번째 시각은 정리정돈이다. 컴포넌트의 이름에만 집중하게 함으로써 복잡도를 획기적으로 줄일 수 있다. 그렇게 되면 더 많은 복잡도에 도전할 수 있는 여지가 생기게 된다. 정리 전 WEB world wide web! HTML CSS JavaScript HTML HTML is HyperText Markup Language. 정리 후 class Subject extends Component { render() { return ( WEB wor..