[주특기 심화] TIL
리액트의 {} 사용법
- 리액트에서는 JSX를 javascript로 변환하기 때문에 javascript문법을 사용하기 위해서는 {}를 사용해야한다.
1) props와 state : props와 state둘다 javascript 객체이기 때문에 둘을 넘겨줄때 {}사용
2) inline style
인라인 스타일은 javascipt 객체 형태로 작성해야한다. 따라서 javascript 객체인 style을 {style}로 사용. 굳이 style 선언 없이 JSX 문법안에 삽입 가능
3) import
export default한 것들은 그냥 import 해오고
export 된 것들은 {} 로 감싸서 import 한다.
- export 된 것들은 이름을 바꿀수 없고 export default 된 것들은 이름 바꾸기 가능
Fragment란?
- 컴포넌트가 여러 엘리먼트를 return 할때 jsx규칙상 하나의 태그로 묶어서 return 해줘야 한다. 이때 fragment를 사용하면 dom에 별도의 노드를 추가하지 않고 여러자식을 그룹화 할 수 있다.
때문에 메모리를 적게 쓸수 있다.
리터럴: 백틱(``), 달러(${}) 사용법
템플릿 리터럴의 기능
1. 줄바꿈(개행)
- 백틱으로 템플릿 리터럴을 사용하면, 줄바꿈 등을 쉽게 표현할 수 있다.
var str_01 = `
Hi!
It's me!
JavaScript!
So Cool!`;
결과 ->
- 표현식 삽입
- ${} 사이에 변수나 연산등을 삽입할 수 있게 되었다.
var name = `사과`
var price = 100
var num = 5;
console.log(`${name}의 구매가는 ${price * num}원 입니다.`)
리액트 안에 style 속성 넣기
1) return 전에 템플릿으로 넣기
render() {
const templateStyle = {
height: "150px"
}
return (
<Fragment>
<div style={templateStyle}>
<h3>"내가 추가한 컴포넌트!!!"</h3>
</div>
</Fragment>
)
}
2) {}로 넣기
render() {
const templateStyle = {
height: "150px"
}
return (
<Fragment>
<div style={{height:'100px'}}>
<h3>"내가 추가한 컴포넌트!!!"</h3>
</div>
</Fragment>
)
}
css 변수설정하기
css 변수는 --로 시작해야한다.
css변수 속성은 그 존재만으로는 아무런 스타일 효과를 내지 못한다.
사용되려면 읽어서 일반 css 속성에 설정을 해줘야하고 var()로 변수값을 읽는다.
.ex {
--gray: #ccc;
background: var(--gray);
}
Author And Source
이 문제에 관하여([주특기 심화] TIL), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hoyyat/주특기-심화주차-정리저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)