컴포넌트
-
[React] props를 통해 컴포넌트에게 값 전달하기Javascript/React 2020. 12. 28. 12:42
props는 properties의 줄임말이다. props는 컴포넌트를 사용하려 할 때 어떠한 값을 컴포넌트에게 전달해줘야 할 때 사용한다. App.js import React from 'react'; import Hello from './Hello'; // 현재 자신의 디렉토리에 있는 Hello 컴포넌트를 불러옴 function App() { return ( ); } export default App; 위와 같이 작성 후 Hello.js로 이동 import React from 'react'; // 리액트를 불러와서 사용하겠다. // 함수 형태 컴포넌트 // 함수형태 컴포넌트의 첫 자리는 대문자 권장 // props 파라미터 안에는 App.js에서 넣어준 값이 객체 형태로 존재 function Hello(..
-
[React] Components refactoringJavascript/React 2020. 10. 27. 12:45
재사용 가능한 컴포넌트를 활용하여 소스코드 리팩토링(refactoring) 게시판 코멘트라는 가상의 소스 코드가 있다고 친다. import React, { use State } from "react"; import "./App.css"; function App(props) { return ( {props.author.name} {props.text} {formatDate(props.date)} ); } export default App; 위 소스도 물론 작동하는 데 있어서 문제는 없다. 하지만 각각의 요소들이 반복적으로 사용될 수 있기 때문에 컴포넌트화로 리팩토링 할 수 있다. 아래 소스가 리팩토링을 거친 소스다. import React, { use State } from "react"; import "..