scrimba에서 학습을 진행하면 여러 장점도 있지만, 결제를 하지 않은 경우 계속되는 결제 요청이 짜증이 날 수 있습니다. 그런 경우 유튜브 영상을 통해 강의를 들어도 큰 문제는 없을 것 같습니다.
그렇지만 영어로 진행되는 강의에 집중하고 있는 본인을 알고 싶다면 과제가 시작되기 전에 멈추고 스스로 과제를 진행하거나 과제를 넘기는 방법을 사용해 볼 수도 있을 것 같습니다.
JS inside JSX
JSX에서 JS를 사용하는 방법이 있습니다. {}(중괄호, curly braces)를 이용하면 데이터를 UI에 적용할 수 있습니다.
데이터뿐만 아니라 html 속성에 문자열이 아닌 어떤 값을 넣어줄 때에도 사용할 수 있습니다.
export default function Test() {
const data = 'something';
return (
<div>
hello this is {data}
<a href={`/${data}`}>link</a>
</div>
);
}props
props란 컴포넌트 내부로 데이터를 전달하기 위한 용도라고 생각하면 됩니다.
우선 컴포넌트를 사용하는 이유 중 하나는 반복적인 UI를 하나의 컴포넌트로 해결하기 위함입니다. 하나의 컴포넌트 코드만 짜고 나머지는 컴포넌트만 가져다가 사용하면 아주 편합니다.
그런데 UI는 같은데 내부 데이터가 다른 경우에 곤란해집니다. 데이터가 다르다고 컴포넌트를 만들면 너무 많은 컴포넌트가 발생하고 다시 중복이 생기기 때문입니다.
이를 위해 컴포넌트 내부로 데이터를 전달해 같은 UI를 가지지만 다른 데이터를 보여줄 수 있도록 돕는 게 props입니다.
사용하는 방법
html에서 속성을 넘겨주는 것처럼 원하는 이름과 값을 전달합니다. 전달한 데이터는 컴포넌트 함수의 인자(argument)처럼 넘어가게 되고, 컴포넌트 내부에서 parameter처럼 사용하면 됩니다.
props로 넘어가는 데이터는 객체 형태로 넘어가기 때문에 객체처럼 사용하면 됩니다.
export default function P() {
const data = 'something';
return (
<div>
<C
name="nulzi"
data={data}
/>
</div>
);
}
// 알기 쉽게 props라는 이름을 사용한거지 자유롭게 변경하면 됩니다.
export default function C(props) {
return (
<div>
<h2> {props.name} </h2>
<p> data: {props.data} </p>
</div>
);
}객체처럼 사용하기 때문에 destructuring 문법이 사용가능 합니다.
const obj = { name: 'nulzi', data: 'something' }; const { name, data } = obj;
참고