내가 props.texContent라고 고른이유는, 막연하게 Tweet 안에 내용이 들어가니까!
라고 대충 생각해버렸던 것 같다. 근데 지금 다시 보니까, 이렇게 생각할거면 차라리
Tweet.textcontent를 고르는게 맞지 않았나....싶다;;
아무튼 props.children이라는 개념에 대해서 정리해보자면,
const Poet = (props) => {
return <ul>{props.children}</ul>
}- props.children을 화면에 표시하는 간단한 코드를 작성해보았다.
위를 다른 방법으로 작성할 수도 있는데,
const Poet = ({children}) => {
return <ul>{children}</ul>
}이렇게 prop을 빼고 children을 prop그 자체로 쓸 수도 있다.
props.children은 주로 자식 or html 의 component가 어떻게 구성되어있는지 모를 때,
화면에 표시해야 하는 경우 유용하게 사용된다.
두번째 오답은 복수정답인줄 모르고 하나만 체크해버렸다!
이 전 글에서도 말했듯이, onClick 안에는 함수로 들어가거나, 외부에서 함수 선언 후 넣어줘야 하기때문에, D번도 맞는 정답지다.
props는 객체로 들어오게 된다는 사실을 잊지말자!
A와 B는 각각 함수 선언식과 표현식으로 만든것이고,
C는 name이라는 변수를 설정 후 name에 "walli"값을 설정해줬다.
D는 props라는 객체를 변수로 설정해 준 후 key와 value값을 정해줬다.
그 후에 spread syntax로 {name:"wailli"}를 전달해주는 모습이다.
음.....여기서 뭔가 중요한 걸 깨달은것같다.
props에 관한 어지러운 생각이 좀 정리된 느낌.
글 맨 위에서 공부한 props.child처럼 위 문제의 구문도 정리해보면,
const Hello = ({name}) => <div>{name}</div>
이렇게 나오게 된다.
D를 풀어보면, {...props}은 {name: "walli"}로 나오게 되서, name이라는 prop을 저장하게 된다. 위의 예제와 일맥상통한다!
아무래도 객체구조분해할당을 다시 되짚어보는 시간이 필요한 것 같다.
//배열
let x = [1, 2, 3, 4, 5];
let [y, z] = x;
console.log(y); // 1
console.log(z); // 2//객체
//예제1
let o = {p: 42, q: true};
let {p, q} = o;
console.log(p); // 42
console.log(q); // true
//예제2
{a : 1}
const { a } = { a : 1 };
a = 1;그 전의 과제에서도 비슷한 경우를 찾을 수 있다.
const Tweet = ({ tweet }) => { //생략 }위의 component는 tweet이라는 prop을 받아서 함수를 다른 component에 재사용 가능하다.
