[ 리액트 ] 컴포넌트와 요소 , props

리액트 컴포넌트란 리액트 요소 또는 다른 컴포넌트를 조합한 것이다

JSX로 작성된 컴포넌트가 라우저에서 표시될 때까지의 흐름을 잠시 설명하자면, 

먼저 웹팩 ( 자바스크립트 빌드 도구, next js 에서는 SWC ) 에 의해 자바스크립트로 변환한다. 그러면 브라우저가 해석이 가능해진다. 

이때 컴포넌트는 자바스크립트의 객체로 표현된다. 변환된 자바스크립트 코드를 보고 브라우저가 화면에 표시하는 것이다

 

자바스크립트 코드에서 프라우저의 표시 내용을 바꿔쓸때는 DOM에 접근해야 하며, 먼저 가상 DOM을 구현한다. 

가상 DOM과 비교해 차이가 있는 부분만 실제 DOM 을 업데이트 한다. 

 

리액트요소

 

class, onchange 대신 className, onChange 를 사용한다. (카멜케이스)

 

 

컴포넌트

 

리액트에서 컴포넌트는 UI의 부품 단위로써, 형태와 작동을 설정한다. 

컴포넌트는 함수(주로 쓰임)나 클래스를 사용해서 구현한다. 

컴포넌트 이름은 대문자로 시작하는 파스칼 케이스를 사용한다. 

 

컴포넌트에 외부에서 값을 전달하려면 props 를 사용한다.props는 컴포넌트를 사용한 부모로부터 전달되는 데이터이다. 함수 컴포넌트에서는 함수의 인수 객체에 부모로부터 전달된 데이터가 들어간다. 

컴포넌트를 사용하는 측은 속성에 같은 이름으로 데이터를 전달한다. 

props는 부모로부터 자식에게 한 방향으로 데이터를 전달한다. props의 내용을 자식이 치환할 수 없다(에러 발생)

만약 컴포넌트 안에서 표시 내용을 변경하고 싶다면 훅을 사용한다. 

 

const Container = (props: { title:string; children: React.ReactElement }) => {
	const { title, children } = props
    
    return ( 
    <div style ={{background : black}}</div>
    
    <div>{children}</div>
    </div>
    
    const Parent = () => {
    
    return (
    <Container>
    <p>Container는 다른 요소를 감싸서 사용한다. 이 부분이 배경색으로 칠해진다. </p>
    </Container>
    
    
    )
    }
    
  export defaclt Parent

 

props안에 children에 전달된다.