본문 바로가기

전체 글

(47)
6] React Component 분리 1. Component 분리의 필요성 현재 코드를 보면 4개의 컴포넌트들이 있다. 하지만 만약 천개, 만개의 컴포넌트들이 있다면? 그리고 외부의 다른 파일에서 컴포넌트들을 사용하고 싶다면? 이는 컴포넌트들을 각 다른 파일로 분리하는 것으로 해결할 수 있다. 훨씬 더 코드가 간결해지며, 필요한 컴포넌트들을 빨리 찾을 수 있고, 또한 App.js말고 다른 파일에서도 사용이 가능하다. 2. Component 분리 1) 먼저 src디렉토리에 components라는 디렉토리를 만든다. 2) 디렉토리에 새로운 파일을 만든다. 저번에 만들었던 TOC컴포넌트를 분리하기 위해 TOC.js파일을 만들어 보았다. 3) 컴포넌트를 그대로 붙여넣는다. 빨간줄이 생길텐데 그 이유는 import React, {Component} ..
생활코딩 React 필기
5] React props 1. props html에서의 attribute를 React에서는 props라고 한다. (아마 용어를 겹쳐 쓰기 않기 위함인듯) 이 props를 사용한다면 저번까지는 매번 똑같이 나오는 Subject태그의 데이터를 자유롭게 바꿀 수 있다. 다음과 같이 props의 이름을 적어주고, 클래스 App에서 해당 props로 데이터를 전달해준다. 페이지 소스를 확인하면 올바르게 코드가 삽입된 것을 확인할 수도 있다. 하지만 더 잘 확인하려면??!!! 2. React Developer tool 현재 코드 상태를 알 수 있는 tool이 있다. https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?h..