JSX 문법

감싸인 요소

 

 

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 합니다.

 

function App() {
  

  return (
    <div>
     <h1>메인 화면</h1>
    </div>
  );
}


export default App;

 

<div> 태그로 감싸져있기 때문에 오류가 발생하지 않는다.

 

리엑트 컴포넌트에서 왜 하나의 요소로 감싸야 할까?

※ Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록

컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야하는 규칙이 있기 때문이다.

 

function App() {
  

  return (
    <Fragment>
     <h1>메인 화면</h1>
    </Fragment>
  );
}


export default App;

 

 

 

리엑트 v16이상 부터 도입 된 Fragment 를 사용 해도 되고

function App() {
  

  return (
    <>
     <h1>메인 화면</h1>
    <>
  );
}
export default App;

 

이렇게도 표현 할 수 있다.

 

---

자바스크립트 표현

JSX는 단순히 DOM 요소를 렌더링하는 기능만 있는 것이 아니라, 자바스크립트 표현식을 쓸 수도 있다.

자바스크립트 표현식을 작성하려면 JSX 내부에 코드를 { } 로 감싸면 된다.

 

 

※렌더링 :사용자 화면에 뷰를 보여주는 것

 

 

function App() {
  
 const name = '리엑트';
  return (
    <>
     <h1>오늘 할 일 : {name} 공부하기</h1>
      
    <>
  );
}
export default App;

 

---

If 문 대신 삼항 연산자

 

JSX 내부의 자바스크립트 표현식에서 if 문을 사용 할 수 없다

하지만 조건에 따라 렌더링 할 때는 JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나,

{ } 안에 삼항 연산자(조건부 연산자) 를 사용하면 된다.

 

삼항 연산자 사용법

A ? B : C  

 

=> A가 true 면 B의 값을 반환하고 false 면 C의 값을 반환한다.

 

js

handleButtonClick = () => {
        this.setState({
            clicked : true,
            validated : this.state.password ==='0000'
        })
    }
    render(){
    return (
        <div>
            <input 
                type="password"
                value={this.state.password}
                onChange={this.handleChange}
                className={this.state.clicked ? 
                    (this.state.validated ? 'success' : 'failure') : ''}
                    />
                    <button onClick={this.handleButtonClick}>검증하기</button>
        </div>
    );
}
};

css

.success {
  background-color: lightgreen;
}

.failure {
  background-color: lightcoral;
}

 

 

---

인라인 스타일링

리엑트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로

넣어주어야 한다.

-문자가 포함되는 이름은 -문자를 없애고 카멜 표기법으로 작성해야한다.

 

ex)

background-color  -> backgroundColor

font-size -> fontSize

font-weight -> fontWeight

 

 

const Test = () => {
    
    
        const name = 'react';
        const style = {
            backgroundColor : 'blue',
            color : 'aqua',
            fontSize : '48px',
            padding: '16px'
        }
        return (
            <div style={style}>
            {name}
            </div>
            
        );
    };
    
  

export default Test;