본문 바로가기
반응형

프로그래밍/React7

[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.
[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.
반응형

티스토리툴바