본문 바로가기
반응형

프로그래밍87

[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.
[React] 컴포넌트별로 파일 분리하기 src > App.js import { render } from '@testing-library/react'; import React, { Component } from 'react'; import './App.css'; class Subject extends Component { render() { return ( {this.props.title} {this.props.sub} ); } } ...중략 class App extends Component { render() { return ( ); } } export default App; 전차수의 소스이다. 중략을 했지만 이 소스가 너무 길어지면 가독성이 떨어지고, 관리가 불편하기 때문에 컴포넌트별로 파일을 분리하여 편리하게 관리하고자 한다. 컴포넌트별로.. 2021. 1. 22.
[React] props 사용하기 src > App.js class App extends Component { render() { return ( ); } } export default App; 지난 글에서 복사해온 코드의 일부이다. return()의 안쪽을 보면 태그가 두 개인데, 화면상에서도 Subject가 가리키고 있는 내용이 두 번 출력될 것이다. 그러면 Subject라는 이름은 단 하나의 같은 내용만 가리키기 때문에 사용성이 좋지 않다. props를 이용하여 이 문제점을 개선 할 수 있다. props의 이해 우리가 평소에 잘 사용하고 있는 HTML 태그를 보면, 같은 div인데 div를 각각 다르게 편리하게 쓸 수 있는 이유는 속성으로 각각 다른 이름을 주었기 때문이다. props는 속성(attribute)의 다른 이름이라고 생.. 2021. 1. 22.
반응형

티스토리툴바