React - Component, Props

Component 

component 생성 및 사용 방법 

 

- NewComponent.js 생성

const MyComponent = () => {
   return <div>컴포넌트</div>
};

export default MyComponent;

 

 

위의 컴포넌트를 App 컴포넌트에서 불러와 사용

(import를 사용하여 모듈 불러오기)

import NewComponent from './NewComponent';

const App = () => {
   return <NewComponent />;
};

export default App;

 

 

 

Props

: properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소. 

  props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정 가능. 

 

 

- JSX 내부에서 props 렌더링

const NewComponent = props => {
   return <div>안녕하세요, 제 이름은 {props.name} 입니다.</div>
};

export default NewComponent;

 

 

- 컴포넌트를 사용할 때 props 값 지정하기

import NewComponent from './NewComponent';

const App = () => {
   return <NewComponent name="Dream" />;
};

export default App;

 

결과

안녕하세요,제 이름은 Dream 입니다.

 

 

 

 

 

- props 값을 따로 지정하지 않았을 때 보여 줄 기본값을 설정하는 방법

  : defaultProps 사용

const NewComponent = props => {
   return <div>안녕하세요, 제 이름은 {props.name} 입니다.</div>
};

NewComponet.defaultProps = {
   name: '기본 이름'
};

export default NewComponent;

 

결과

안녕하세요, 제 이름은 기본 이름 입니다.

 

 

 

 

 

- 태그 사이의 내용을 보여 주는 children

import NewComponent from './NewComponent';

const App = () => {
   return <NewComponent>꿈</NewComponent>;
};

export default App;

 

위 코드에서 NewComponent 태그 사이에 작성한 "꿈" 문자를 NewComponent 내부에서 보여 주기 

const NewComponent = props => {
   return (
      <div>
         안녕하세요, 제 이름은 {props.name} 입니다. <br />
         children 값은 {props.children} 입니다.
      </div>
   );   
};

NewComponet.defaultProps = {
   name: '기본 이름'
};

export default NewComponent;

 

결과 

안녕하세요, 제 이름은 기본 이름 입니다.
children 값은 꿈 입니다.