Props
props 란
컴포넌트 외부에서 컴포넌트에게 값을 지정해 주는것
주체는 컴포넌트이다. 외부의 값이 아닌
컴포넌트를 향해 값을 주기 위해선 컴포넌트의 function 의 인자에 props 를 넣어준다.
이렇게 되면 외부에서 값을 받을 준비가 된것이고
컴포넌트를 사용 할때 외부에서 임의의 값을 주게 되면 그 값은 props 가 되어 컴포넌트의 함수를 진행하게 된다. 예를 들어
const Greet = (props) {
console.log(props)
return <div> 나는 {greet.name}이라고 해. 내 나이는 {greet.age}살이야.</div>
}Greet 이라는 컴포넌트가 있다고 가정을 하면
props는 무조건 객체기 때문에 props.name은 props 객체의 name키 이고 props.age는 props의 age 키이다. 그러므로 외부에서 들어오는 값은 name 과 age라는 키 안에 들어있을 것이라 추측해볼 수 있다.
그렇다면 외부에서 들어오는 방법은 어떻게 될까
function App() {
return (
<Greet name="김이름" age="20" />
);
};라는 형태로 이름을 부여할 수도 있고
let manyGreet = [
{ id : 1
name : 김이름,
age : 20
},
{ id : 2
name : 박성함,
age : 50
},
{ id : 3
name : 이네임
age : 30
},
]처럼 배열안에 객체가 들어간 형태도 부여할 수 있다.
그렇게 되면 외부에서 들어가는 방식이 달라지는데
return (
{manyGreet.map((greet) => {
return <Greet key={greet.id} greet={greet} />
})}
)컴포넌트 Greet 에 반복으로 객체를 넣는데(manyGreet배열)
리엑트에서 map 메소드를 이용하려면 키값이 필요하고 key 값으로 id를 넣어주고
greet이라는 키에 배열의 객체가 각각 들어가게 된다.
그리고
const Greet = (props) {
const greet = props.greet
return <div> 나는 {greet.name}이라고 해. 내 나이는 {greet.age}살이야.</div>
}greet의 이름과 나이가 필요한것이니 props의 greet키를(즉 배열 각각의 객체를) greet 이라는 변수에 넣어주게 된다.
State
state 와 props의 다른점은 props는 외부에서 값을 받는것이고 state 는 내부에서 값이 변하는 것이다.
state는 useState 라는 함수 사용
function TrueOrFalse() {
const [isTrue, setIsTrue] = useState(false);
//[저장되는변수, 변수에 대한 함수] = useState(변수의 초기값); 초기값 false가 setIsTrue 라는 함수를 통하게 되어 isTrue라는 변수에 저장이 된다.
state 변수에 저장된 값을 사용하려면 JSX 안에 직접 불러서 사용하면 됨
<div> {isTrue ? 'True' : 'False' } </div>state 를 갱신하려면 변수를 갱신할 수 있는 함수인 setIsTrue 를 호출
function TrueOrFalse() {
const [isTrue, setIsTrue] = useState(false);
const handleOnClick = (event) => {
setIsTrue(!isTrue);
return (
<div className="App">
<input type="button" value='true?' onClick={handleOnClick} />
<span>{isTrue ? "True" : "false"}</span>
</div>
);
}
};이렇게 클릭에 대한 이벤트를 실행하면 setIsTrue 함수가 실행되고 결과값이 isTrue에 들어가게 된다.
이후 내용은 다음 TIL 에 작성
마지막으로...
오늘 배운 내용이지만 내일의 모든 수업이 sprint이기 때문에 둘로 나눠서 내일 state 이론 나머지와 실습 내용 일부를 적어야겠다. React를 배우면서 생각보다 어려운점이 많긴 하지만 나름 재밌는 점도 있는것 같고 또한 활용될 부분이 많아서 반드시 익히고 넘어가야하겠다는 생각이 든다.
