본문 바로가기
반응형

전체 글90

[JavaScript] push와 concat의 중요한 차이 배열에 원소를 추가하는 방법 2가지중 push와 concat은 어떤 차이가 있을까? var arr1 = [1, 2, 3]; arr1.push(4); // arr1은 [1,2,3,4] * push는 오리지널 값이 아예 바뀌어서 arr1은 완전히 1,2,3,4 가 된다. var arr2 [1, 2, 3]; var result = arr2.concat(4); // result는 [1,2,3,4] // arr2는 [1,2,3] * concat은 오리지널 값은 그대로 두고, 새로운 값이 생긴다. 오리지널 데이터를 아예 변결할 것인지, 아니면 오리지널 데이터를 따로 두고 추가할 것인지 잘 판단을 해서 사용해야 한다. 2021. 1. 31.
[React] 클릭이벤트 이해하기 지금까지 컴포넌트화, props, state를 모두 이용하여 만든 페이지이다. 여기까지가 기본 내용이고 이제는 이벤트를 이용해볼 건데, 내가 할 것은 WEB을 클릭했을 때 맨 아래 부분이 "HTML ~" 이게 아니라 처음 기본페이지에 걸맞게 Welcome이 나오도록 만들어볼 예정이다. 그리고 ul-li로 만들어준 HTML, CSS 등등도 거기에 맞는 정보를 나타나게 할 것이다. 1. 링크 걸기 class Subject extends Component { render() { return ( {this.props.title} {this.props.sub} ); } } 간단해서 설명이 필요X a태그를 걸어주고 WEB을 클릭하면 /로 이동하도록 만든다. 2. web을 누르면 보여줄 내용 작성 App.js cla.. 2021. 1. 24.
[React] state 사용하기 (다중속성) State의 사용방법 (다중 속성의 경우) : 앞선 Subject는 겨우 WEB, world wider web! 으로만 이루어져 있는데, TOC의 경우 ul-li로 감싸진 많은 내용으로 이루어져 있다. 이럴 때는 어떻게 쓸까. class App extends Component { constructor(props) { super(props); this.state = { subject:{title:"WEB" sub:"world wider 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.. 2021. 1. 22.
[React] state 사용하기 (단일속성) State의 이해 props가 사용자에게 중요한 정보라면(외부의 값), state는 구현자에게 중요하다고(내부의 값) 할 수 있다. state는 많은 언어에서 그런 것처럼 은닉의 효과가 있다. 문장만 봐서는 사실 이해가 어렵고, 예제를 하면서 알아 갈 수 있을 것 같다. src > App.js class App extends Component { render() { return ( ); } } export default App; 해당 코드는 전차수의 내용을 복사해온 것이다. props를 통해서 리펙토링을 했지만, 여전히 뭔가 살짝 지저분해 보이는 감이 있다. 그리고 값이 App안에 훤히 들어가있기 때문에 보호가 되지 않는 것도 같다. 그래서 해당 값을 state로 만들고, 그 값을 Subject의 pro.. 2021. 1. 22.
반응형

티스토리툴바