반응형 전체 글90 [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. [React] 기본적인 컴포넌트 만들기 해볼 예제는 태그, 태그, 태그의 내용들을 컴포넌트화를 통해 각각 분리하는 작업을 해볼 것이다. public > pure.html 생성 WEB world wider web! HTML CSS JavaScript HTML HTML is Markup Language; 컴포넌트화의 이유는, 이런 HTML코드가 만약 만줄 이상이 넘어간다면 작업이 피곤해지기 때문이다. App의 기본구조에서 앞으로 계속 사용하고 익숙해져야 할 부분이 class XX extends Component { render() { return ( ); } } 바로 이 부분이다. 컴포넌트화를 시키기 위해서는 이 코드자체를 하나의 실행 구문으로 외우는 게 편하다. 이제 새로운 컴퍼넌트를 만들어보자. src > App.js import { rend.. 2021. 1. 22. [React] 쉽게 개발환경 세팅하기 + 디렉토리 구성 설명 1. 어떤 설치를 진행할지 선택하기(저는 컴퓨터에 다운받는 방식) reactjs.org/docs/getting-started.html 해당 리액트 홈페이지의 문서를 보면, 리액트를 시작할 수 있는 다양한 방식을 소개하고 있다. 온라인으로 구현해볼 수 있는 방식도 있고, 깃허브에서 다운 받는 방식도 있는등 여러 선택이 존재하지만 제가 해볼 첫번째 방식은 "내 컴퓨터에서 다운받아 쓰는 방식"이다. 그리고 그렇게 쓰기 위해서는 'npm'이라는 프로그램이 필요하다고 한다. npm이란 쉽게 말해 node.js로 만들어진, 명령어로 여기 저기에서 유용하게 쓸 수 있는 소프트웨어~ 그리고 두번째로 이 "npm을 통해 create react app을 설치하는 방법"을 사용할 것이다. (공식적으로 npx를 권장하나, n.. 2021. 1. 22. 이전 1 2 3 4 5 6 ··· 23 다음 반응형
