그럴만두!

배열이나 객체를 복제할 수 있다. 먼저 배열로 예를 들어보자면 var arr = [1,2]; var arr2 = Array.from(arr); console.log(arr, arr2, arr === arr2); // 출력 결과물 = [1,2] [1,2] false Array.from()을 통해서 배열을 복제할 수 있고 arr와 arr2는 서로 다른 값이다. 객체 복제의 예로는 var a = {name:mandoo}; var b = Object.assign({},a); console.log(a,b,a===b); //출력결과 = {name:mandoo} {name:mandoo} false b.name = 'dooman'; console.log(a,b,a===b); //출력결과 = {name:mandoo} {..

성능을 향상시키기 위해서 컴포넌트의 render 함수가 실행될지 안될지를 개발자가 결정할 수 있도록 하는 특수한 약속의 함수 shouldComponentUpdate 가 있다. shouldComponentUpdate(newProps, newState){ console.log('=====toc render shouldComponentUpdate' ,newProps.data, this.props.data); return false; } 이 코드는 해당 컴포넌트의 render함수 전에 작성한다. newProps.data 로는 바뀐값을 알 수 있고, this.props.data 를 통해서 현재 값을 알 수 있다는 것이다. shouldComponentUpdate 함수의 결과값이 true 면 render함수가 호출되..

배열에 원소를 추가할 때 .push를 자주 쓰곤 했는데 .concat이라는 기능을 알게 되었다. .concat도 똑같이 배열에 원소를 추가하는데, .push 와 뭐가 다를까? 바로 .push는 배열의 원본에 원소를 추가하는것이라면, .concat은 배열의 원본은 건드리지 않고 조작하는 것이다. 코드로 예를 들자면, var arr = [1,2]; arr.push(3); // 이라면, arr를 출력했을 때 [1,2,3]이 출력된다. var arr2 = [1,2]; var result = arr2.concat(3); //이라면, result는 [1,2,3]이 되지만 arr2를 출력해보면 [1,2]가 출력된다. state의 값을 바꿔야 할 때 .push를 쓰지 말고, .concat처럼 새로운 데이터를 추가하는걸..

클릭 시 state값을 변경하고 싶은 상황 class App extends Component { constructor(props){ super(props); this.state = { mode:'read', subject:{title:'WEB',sub:'World wide web'}, welcome:{title:'welcome', desc:'Hello,React!'}, contents:[ {id:1, title: 'HTML', desc:'html is ...'}, {id:2, title: 'css', desc:'css is ...'}, {id:3, title: 'javaScript', desc:'js is ...'} ] } } render(){ console.log('lendering'); var _ti..

event 함수 속성중에 preventDefault가 있다는 것을 알았다! 이 속성은 함수의 기본적인 동작을 못하게 막을 수 있는 기능이다 예를 들어 *밑의 코드들은 리액트 코드이므로 코드 문법이 조금 다를 수 있다. onClick={function(e){ alert('hi'); }} 이런 코드라고 보면 onClick으로 클릭했을 때 alert가 띄워지고 확인 버튼을 누르면 깜빡하면서 화면을 다시 로드하게 되는데, 이때 다시 로드하는 것을 막기 위해서(다시 로드하고 싶지 않을 때) e.preventDefault를 사용하는 것이다. onClick={function(e){ console.log(e); e.preventDefault(); alert('hi'); }}

컴포넌트 내부적으로 사용되는 것들이 state 이다. 리액트라는 시스템이 컴포넌트를 만들고 그 컴포넌트가 좋은 부품이 되기 위해서는 외부의 props에 따라서 컴포넌트를 실제로 구성하는 state가 철저히 분리되어있어야 한다. 사용과 구현의 분리가 확실하게 있는 상태로 양쪽의 편의성을 각자 도모하는 것이 좋은 부품을 만드는 것의 핵심이고, 리액트도 마찬가지이다. 아래 코드로 state를 공부해보자. class App extends Component { render(){ return ( ) }; } App 이라는 컴포넌트 안에 Subject라는 하위 컴포넌트가 있다. 하위 컴포넌트들의 props에 지금 하드코딩이 되어있는 것들을 state로 만들고 props로 전달해보자. 일단 먼저 constructor ..

https://ko.reactjs.org/docs/components-and-props.html Components와 Props – React A JavaScript library for building user interfaces ko.reactjs.org props를 정의하는 공식 문서 링크 “props” (props는 속성을 나타내는 데이터입니다) 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트라고 정의한다. 저번에 만들었던 컴포넌트 코드 https://ojm1484.tistory.com/42 [react] 컴포넌트 만들기 src폴더 아래 App.js class Subject extends Component { render(){ return ( // 컴포넌트를 만들때..

src폴더 아래 App.js class Subject extends Component { render(){ return ( // 컴포넌트를 만들때는 최상위 태그부터 만들어야한다. WEB world wide WEB ) }; } class App extends Component { render(){ return ( ) }; } 코드 작성 후 서버를 올려보면 이렇게 화면이 출력되는 것을 확인할 수 있다. 더 추가해 보자. class TOC extends Component { render(){ return ( HTML css js ) }; } class Content extends Component { render(){ return ( html html is hyperText Markup Language. ) ..

먼저 node.js 를 설치해준다. https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 다운과 설치가 끝났다면 터미널을 켜서 node -v 와 npm -v 명령어를 날려보자 날렸을 때 버전이 나온다면 성공 리액트를 설치하는데에는 두 가지 방법이 있는데 npm을 통해 설치하는 방법으로 해보자. npm install create-react-app 명령어를 날려주면 다운로드가 되거나 에러가 나거나인데, 에러가 난다면 앞에 sudo를 붙여주고 다시 시도해보자. 다운로드가 되었다면 create-react-app -V 로 버전을 확인하며 설치가 잘 되었는지 확인해..

sts에 톰캣을 연결하여 보자!!! 톰캣이 잘 설치가 되어있다는 가정하에 시작한다. 톰캣 설치를 안했다면? https://ojm1484.tistory.com/39 [개발환경] mac에 tomcat 설치하기 맥북에서 톰캣 설치하고 실행을 해보자!! 먼저 톰캣을 설치한다. https://tomcat.apache.org/download-80.cgi Apache Tomcat® - Apache Tomcat 8 Software Downloads Welcome to the Apache Tomcat® 8.x software download page. This page provid ojm1484.tistory.com 이 게시물을 참고하여 설치해주시어요! sts실행 후 preference에 들어간다. Server > Ru..