[React] props / state

리액트는 컴포넌트를 import 해서 사용한다

 

 

▶ 함수형 컴포넌트

 

예제 1 ) 

컴포넌트 (=function 이라고 생각하면됨) 기본틀잡기

( 단축키 : rsc enter )

 

 

 

app 컴포넌트에서 potato 컴포넌트 갖다쓰기

 - potato import 하기

app 에서 리턴해주는 애는

html.index div root 안으로 들어간다

 

potato 에서 리턴한 애는 app 으로  들어간다

app + poatao 가 html.index div root 안으로 들어간다

 

 

 

 

 

예제 2 ) 

 

 

 

 

▶ 클래스형 컴포넌트

도 있긴한데 넘어가도록하자

 

 

 

---

 

 

화살표 함수에서 this 는 자신이 속한 클래스를 의미한다

기존함수에서  this 는 자신이 속해있는 곳에서 가장 가까운 객체를 의미한다

 

 

▶ props 

 = property 

 

react 에서는 자식의 자식의 자식의 .. 컴포넌트를 사용한다

- 부모 컴포넌트에서 자식 컴포넌트로 값 전달할때 사용

    = 부모의 값을 자식이 쓸때 props 이용

자식이 부모의 state(값)를 사용하고싶다 ! 이때 부모는 props 를 이용해 state을 전달한다

매개변수와 비슷함

 

 

[ 부모에서 props 전달할때 방법 ]

컴포넌트 props 이름 = {변수명}

컴포넌트 props 이름 = {문자열 이외의 값}

컴포넌트 props 이름 = "문자열"

 

 

[ 자식에서 props 받아서 사용할 때 ] 

function 자식컴포넌트(props){
	return(
    <태그>{props.props이름}</태그>
    )
}

 

 

 

▷ children

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

 - 리액트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 보여주 는 props가 children

 

 

const App = () => {
	return <MyComponent>리액트</MyComponent>;
};

MyComponent 태그 사이에 작성한 리액트 라는 문자열을 MyComponent 내부에서 보여주려면

props.children 값을 보여 주어야 함 🔽

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

 

 

 

▶ state

변수대신쓴다고 생각하믄됨

변수대신 state를쓰면

state가 변하면 자동으로 re-rendering이 된다 => 변경된 state를 사용자가 바로 볼 수 있음

변수는 변한다고해서 화면이 자동으로 바뀌지않는다

 

state는 동적 데이터를 다룰 때 사용

                  ㄴ 변경될 가능성이 있는 데이터

리액트는 state가 변경되면 state가 포함된 HTML을 자동으로 재렌더링 해줌

  => 수정사항이 자동으로 웹페이지에 반영된다