개발의 시작과 끝

생활코딩 19.8강 - create 구현 : immutable 원본은 그대로 둔 채로 원본을 복사하는 방식이다. 구현을 단순하게 유지해서 더 높은 복잡성에 도전하기 위한 노력이다. 배열 var a = [1,2]; var b = Array.from(a); 출력 값 => a[1,2] b[1,2] // 값은 같지만 둘은 다르다 b.push(3); 출력 값 => a[1,2] b[1,2,3] 객체 var a = {name:'egoing'}; var a = Object.assign({},a); 출력 값 => a{name: "egoing"} b{name: "egoing"} // 값은 같지만 둘은 다르다. b.name = 'leezche'; 출력 값 => a{name: "egoing"} b{name: "leezche"..

생활코딩 19.7강 - create 구현 : shouldComponentUpdate 프로그램이 커지면서 성능을 향상하고 싶을 때 render() 함수가 실행될지 실행되지 않을지 리액트로 코드를 작성하는 개발자가 결정할 수 있도록 특수한 약속의 함수를 제공한다. 그것을 shuldComponentUpdate(){} 라고 한다. 이 함수는 2개의 매개변수를 받도록 약속되어있다. 이 함수를 씀으로써 해당 클래스에 데이터라고 하는 props의 값이 바뀌었을 때 render()가 호출되고 바뀌지 않았을 때는 호출하지 않아 불필요한 호출을 막는다. shouldComponentUpdate(newProps, newState){ console.log('==> TOC render shouldComponentUpdate' n..

생활코딩 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 ..