React 공부 컴포넌트 실습

현재 코드 

class App extend component {
  render( ) {
    return(
      <div classname="App">
         hello world 
      </div>
    );
  };
};

app 이라는 큰 컴포넌트가 있다. 

 

그리고 오늘의 실습인 컴포넌트를 생성하고, App 컴포넌트에 넣어서 

각각 컴포넌트를 따로 구분하여 관리를 하려고 한다. 

 

첫번째로 만든 컴포넌트는 Subject 라는 컴포넌트이다. 코드는 아래와 같다. 

class Subject extends Component{
  render( ) {
    return(
      코드 
    )
  }
};

 

App 컴포넌트와 같은 방법으로 코드를 입력해 주었다. 

 

이제 App 컴포넌트 안에 있는 div 에 Subject 컴포넌트를 넣어줘야 하는데, 

<div className="App"> 
  <Subject></Subject> 
</div>

 

이렇게 해서 컴포넌트를 넣어주었다.

 

컴포넌트를 나눠서 관리를 하는 이유는 여러가지가 있다.

1. 웹브라우저는 React 를 모른다. 그래서 컴포넌트로 보여지는게 아닌, 그냥 HTML 코드로만 보인다. 

사용자에게 보여지면 안되는 내용들이 보여질 수 있기 떄문이다. 

 

2. 관리하기가 쉽다. 컨텐츠를 변경할때 많은 제일 큰 App 컴포넌트에서 찾는게 아니라, 

Subject 컴포넌트만 작업하면 되기 때문에, 코드의 가독성도 수정도 편해진다. 

 

막상 해보니 확실히 몇줄 없으니 눈에 확 들어왔다. 

나중에 코드가 많아지겠지만 그래도 이전에 작업했던 몇백줄이 넘어가는 코드들 보다는

훨씬 보기가 좋다. React 기술은 정말 관리하기 쉽게 만들어 주는 좋은 서랍이라는 느낌이 든다. 

 

다음 내용은 props 를 사용하여 컴포넌트를 좀 더 편리하게 수정하는 내용을 공부할 예정이다.