React 1 : 컴포넌트(Component)

리액트는 프론트에서 가장 사용도가 높은 프레임워크라고 한다..! 

UI를 구축할 때 가장 효율적이고 유연한 js라이브러리 (홈페이지 참고)라고 함.

어렵지만 천천히 익혀나가려고 한다 공부는 리액트 공홈과 생활코딩 강의를 통해 진행할 예정.

복습이 최고!!! 부족한 부분이 많지만 내 방식대로 정리하려고 함

 

 

컴포넌트란?

 

리액트는 컴포넌트라는 작은 부분들을 이용해 프레임을 구축해나간다. 

class Test1 extends Component {
 render(){
 	return(
    <div className="App">
    	<Subject></Subject>
        //밑에 Subject클래스를 부름
        //단, 같은 파일 내에서는 저렇게 가능하지만 다른 파일이라면 import해줘야 함.
    </div>
    );
 }
}


class Subject extends Component{
	render(){
    	return(
        	<header>
            <h1>Hi</h1>
            my name is ....
            </header>
        
        );
    }
}

기본적으로 component를 상속하는 클래스를 만드는데 

이 클래스 내에는 render라는 메소드와 return이 포함되어 있다. 

 

Test1 클래스를 React 컴포넌트 클래스 or React 컴포넌트 타입이라고 한다. 

각각의 컴포넌트가 props라는 매개변수를 받아오고 render를 통해 보여줌!

 

보통 영상을 편집하고 렌더링을 통해 완성작을 추출하는 것처럼

render()를 통해 보고자하는 것을 추출한다. 

 

아 그리고 컴퍼넌트 내에서는 하나의 최상위 태그만 사용해야 된다고 함!!

각각의 컴포넌트들은 템플릿같은 역할을 하는데 그들을 조합해서 코드를 일일이 입력하지 않아도

수정과 삭제가 편리하도록 함.

 

그래서 컴포넌트를 정리정돈의 도구라고 할 수 있겠다..!!