[주특기 심화] 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!`;

결과 ->

2. 표현식 삽입

• ${} 사이에 변수나 연산등을 삽입할 수 있게 되었다.

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);
}