리액트 공식문서 스터디 1주차 - 2
Using curly braces: A window into the JavaScript world
- 동적으로 값을 지정하려면 중괄호(
{})를 사용해 변수・함수・연산 결과 등 다양한 JS 표현식 삽입 할 수 있다.
const name = "Gregorio Y. Zara";
return <h1>{name}'s To Do List</h1>;
// 변수를 JS 표현식으로 삽입
<h1>To Do List for {formatDate(today)}</h1>
// 함수호출을 JS 표현식으로 삽입
✨참고사항✨
-
JSX 중괄호
{}에서는 자바스크립트 표현식만 허용된다.-
변수, 숫자, 산술 연산, 함수 호출, 배열 map/filter, 삼항(
?), 논리 (&&) 등 값을 반환하는 코드만 쓸 수 있다. -
자바스크립트 문(
statement)는 직접 쓸 수 없다.- if (조건)
- for (...)
- 변수 선언/할당
const ~ let ~ var ~ - 함수 정의
익명, 선언식
-
이러한 제어/분기/반복 로직은 JSX 바깥(컴포넌트 내부)에서 처리해 결과를 중괄호로 넣어야 한다.
-
Where to use curly braces
-
중괄호 사용 위치는 JSX 태그 내 텍스트와 속성 값 2곳뿐이다.
-
<h1>{name}'s To Do List</h1>(텍스트) -
<img src={avatar} />(속성값) -
문자열 전달과 구별되며,
src="avatar"처럼 쓰면 문자열 그대로 넘어가서 동작이 다름.
-
Using "double curlies": CSS and other objects in JSX
- 객체를 JSX에서 속성값으로 전달할 때는 중괄호를 두 번 겹침 (
{{}}).
<ul style={{ backgroundColor: "black", color: "pink" }}>...</ul>
// 인라인 스타일 예시
// 속성값이 객체이므로 JSX용 {} 객체용 {}가 중첩되어야 한다.
More fun with JavaScript objects and curly braces
- 자바스크립트 객체를 여러 데이터로 정리하고, JSX에서 필요한 부분만 뽑아 쓸 수 있다.
const person = { name: 'Gregorio Y. Zara', theme: { backgroundColor: 'black', color: 'pink' } };
...
<div style={person.theme}>
<h1>{person.name}'s Todos</h1>
...
</div>
// 객체 내부의 필요한 값들만 가져와서 사용할 수 있음.
함께 풀어보는 챌린지
- 아래 코드는
Objects are not valid as a React child를 표출한다.
const person = {
name: "Gregorio Y. Zara",
theme: {
backgroundColor: "black",
color: "pink",
},
};
export default function TodoList() {
return (
<div style={person.theme}>
<h1>{person.name}'s Todos</h1>
<img
className="avatar"
src="https://i.imgur.com/7vQD0fPs.jpg"
alt="Gregorio Y. Zara"
/>
<ul>
<li>Improve the videophone</li>
<li>Prepare aeronautics lectures</li>
<li>Work on the alcohol-fuelled engine</li>
</ul>
</div>
);
}
- Extract the image URL into the person object.
const person = {
name: "Gregorio Y. Zara",
imageUrl: "https://i.imgur.com/7vQD0fPs.jpg",
theme: {
backgroundColor: "black",
color: "pink",
},
};
export default function TodoList() {
return (
<div style={person.theme}>
<h1>{person.name}'s Todos</h1>
<img className="avatar" src={person.imageUrl} alt="Gregorio Y. Zara" />
<ul>
<li>Improve the videophone</li>
<li>Prepare aeronautics lectures</li>
<li>Work on the alcohol-fuelled engine</li>
</ul>
</div>
);
}
- Write an expression inside JSX curly braces
const baseUrl = "https://i.imgur.com/";
const person = {
name: "Gregorio Y. Zara",
imageId: "7vQD0fP",
imageSize: "s",
theme: {
backgroundColor: "black",
color: "pink",
},
};
export default function TodoList() {
return (
<div style={person.theme}>
<h1>{person.name}'s Todos</h1>
<img
className="avatar"
src={`${baseUrl}${person.imageId}${person.imageSize}.jpg`}
alt={person.name}
/>
<ul>
<li>Improve the videophone</li>
<li>Prepare aeronautics lectures</li>
<li>Work on the alcohol-fuelled engine</li>
</ul>
</div>
);
}
자바스크립트 표현식의 대표적인 예
map에 대하여
-
반복 렌더링의 대표적 "자바스크립트 표현식"
-
map의 역할
- 배열의 각 요소를 함수를 통해 변환해서 새로운 배열을 만들고, 그 결과를 JSX 중괄호 안에서 바로 사용할 수 있음.
-
대표적 활용
- UI 리스트 반복 렌더링 ( 배열 -> 여러 컴포넌트 생성 )
{
items.map((item) => <li key={item.id}>{item.name}</li>);
}
for문과의 차이점
| 기준 | map | for |
|---|---|---|
| 종류 | 배열 메서드 | 반복문(statement) |
| 반환값 | 새 배열(표현식) | 없음(문) |
| JSX 사용 | JSX() 내부 사용 가능 | JSX() 내부 사용 불가 |
| 함수형/불변성 | 함수형 스타일, 불변성 유지 | 명령형 스타일, 변수 선언/수정 필요 |
| 용도 | 반복 렌더링, 결과 배열 필요할 때 사용 | 절차적 반복, 다양한 로직 처리에 사용 |
| 코드예시 | {arr.map(x => <div>{x}</div>)} | for(let i=0; i<arr.length; i++) {...} |
Key 값의 중요성
1. Key값이 필요한 이유
-
React는 리스트를 렌더링할 때 각 요소가 "어떤 데이터에 대응되는지" 식별해야한다.
-
Key는 React가 아이템의 변화가 있을 때 최소한의 DOM 변경만 하도록 최적화하는 기준값이다.
2. Key값으로 사용 가능한 것 과 불가능 한 것
-
가능한 것 : 데이터의 고유한 값 ( id, db pk ), 변하지 않는 uuid
-
불가능한 것 : 배열의 인덱스 ( 순서값 ), 매번 새로 생성되는 랜덤값 ( uuid )