4화: JavaScript in JSX with Curly Braces

이 글은 단순히 리액트 공식 문서를 읽고 베꼈을 뿐이다!! 학습 목적이라면 공식 문서를 보는 걸 추천한다.

 

Unsplash의 Patrice Bouchard님 사진

 

공식 문서

https://react.dev/learn/javascript-in-jsx-with-curly-braces

JavaScript in JSX with Curly Braces – React

따옴표로 문자열 전달하기

• JSX에 attribute를 하드코딩된 문자열로 전달하고 싶으면 따옴표로 감싸면 됨
• eslint에서는 큰따옴표로 감싸는 걸 추천했음
• 반대로 작은 따옴표를 선호하는 의견도 있긴 함

중괄호로 동적 값 전달하기

• 함수 호출을 비롯한 모든 자바스크립트의 표현식(expression)이 중괄호 안에서 사용 가능
• JSX 태그 내부의 text 값을 중괄호를 이용해 부여 가능
• attribute로 쓸 때는 = 기호 직후에 사용 가능
• 중괄호 안에 중괄호를 넣는 경우: 바깥쪽은 동적 값 중괄호, 안쪽은 object의 중괄호