React의 기본인 ReactDom,render와 state와 props 에 대한 정리

1.ReactDom

우선 브라우저에는 Dom(구조화된 문서를 표현하는 형식)을 이용해서 자바스크립트 및 프로그래밍 언어와 페이지를 연결한다.

ReactDom은 Dom과 React의 컴포넌트들을 이어주는 역할이라고 생각하면 된다.

 

 

 

2.Render

한글로 만들다라는 의미이다. 

예시 코드) 

클래스 형식으로 예시

class Test extends Component{
   render(){
   
   }
}

위의 코드를 통해 Test라는 컴포넌트가 만들어졌다.

 

 

3.State

한글로 상태라는 의미로 
컴포넌트의 상태를 나타내는 객체이다.

 

class Test extends Component{
   state = {
     name:dooly
   }
   render(){
   
   }
}

 

위의 코드에선 Test라는 컴포넌트의 상태중 name은 dooly 이다.

 

이떄 이름을 변경하고싶을때

 

class Test extends Component{
   state = {
     name:dooly
   }
   change = ()=>{
   	 this.state.name="둘리"
   }
   render(){
   
   }
}

change함수를 호출하면 둘리로 바뀔것 같지만

react는 업데이트가 됬는지 안됬는지 알수없다.

그래서 state를 업데이트할때에는

아래처럼 setState함수를 호출해야한다.

class Test extends Component{
   state = {
     name:dooly
   }
   change = ()=>{
     this.setState({name:"둘리"});
   }
   render(){
     
   }
}

*setState로 state가 변경되면 react는 알아서 render()를 호출하여 업데이트 된다..

 

 

4.Props

컴포넌트 밖에서 주어지는 데이터이다.

State:내부 자체적으로 데이터를 정의

Props는 외부에서 데이터를 재공받는다.

 

Props의 장점은 컴포넌트의 재사용을 높일 수있다.