점점 블로깅이 하기가 귀찮아지고 공부 의욕도 사라진다. 수업 진도는 따라는 가고 있는데 딱 그것만 하고 있는것 같다. 그것만 하기에는 코드스테이츠에서 시키는 공부의 양이 그렇게 많지는 않으니 오늘부터라도 차근차근 블로깅 밀린 것을 좀 해봐야 겠다.
Props
props는 리엑트에서 사용하는 문법 중 하나로 부모 컴포넌트에서 자식 컴포넌트로 전달하는 변수라 생각하면 편하다. 함수의 전달인자를 받아 매개변수를 활용하여 사용하는 것과 비슷한 원리인데, 여기에서는 클라스와 비슷한 사용법이 이용된다.
function Parent() {
return (
<div className="parent">
<h1>I'm the parent</h1>
<Child text={"I'm a child"}/>
</div>
);
};
function Child(props) {
return (
<div className="child">
<p>{props.text}</p>
</div>
);
};부모 컴포넌트에서 자식 컴포넌트를 호출함과 동시에 속성으로 props를 넘겨주면, 이를 자식 컴포넌트에서 props로 받아 {props.속성이름} 으로 사용이 가능하다.
state
state 또한 리엑트의 문법 중 하나로, import 해서 사용해야 한다. state는 변수에 값을 저장하고, 이를 관리하는 함수를 따로 만들어 변수를 사용할 때와 변수를 변경할 때를 따로 떼어서 관리하는 방법이다. 그리고 컴포넌트 내에서 변경되어 렌더링이 되어야 하는 값들은 이 state 로 관리 되는 것이 좋다.
useState
state를 관리하는 방법이다.
import React, { useState } from "react";
function component() {
[state,setState] = useState(0)
const click => (event)=>{
setState((state) => state+1)
}
return
<div>
<button onClick={click}>countbutton</button>
<p>{state}</p>
</div>
}우선 리엑트와 useState를 import 해주고, 컴포넌트 안에 useState를 설정해준 후, 버튼을 클릭했을 때에 state의 값이 한 개 올라가도록 설정해 준 것이다.
