React 입문 - 2

- JSX 란?

- JS 와 HTML 을 같이 쓸 수 있게 해주는 React 문법.

JSX 특징

////// JSX 요소는 return 뒤에 와야한다.

import React from 'react'

function App() {
  return (
    <div>App</div>
  )
}

export default App

////// 태그를 꼭 닫아야 한다.

import React from 'react'

function App() {
  return <input type="password" / >
}

export default App

////// 무조건 1개의 최상위 엘리먼트만 생성해야함

import React from 'react'

function App() {
  return (
    <div>
      <p>안녕하세요</p>

      <input type="text" />
    </div>
  )
}

export default App

// 1개의 <div> 엘리먼트로 감싸고 그 안에 자식 엘리먼트를 생성해야함.
// 만약 최상위 <div> 밖에 엘리먼트를 생성 시 에러 발생. 


// ex)
function App() {
  return (
    <p>안녕하세요</p>	// <p> 태그가 <div> 밖에 있으므로 에러 발생
    <div>

      <input type="text" />
    </div>
  )
}

////// JSX 에서 JavaScript 값을 가져오려면 {} 중괄호 를 쓴다.

import React from 'react'

function App() {
  const myDogName = "Mong"
  
  return (
    <div>
      우리집 강아지 이름은 {myDogName} 입니다.
    </div>
  )
}



// 값을 가져오는 것 뿐만 아니라 JavaScript 문법을 쓸 때도 {} 를 사용한다.

function App() {
  const myDogAge = 14
  
  return (
    <div className="myDog">
      우리집 강아지는 
      {myDogAge > 10 
        ? myDogAge + "살이라서 노견입니다" 
        : myDogAge + "살이라서 노견이 아닙니다"}
    </div>
  )
}

export default App

////// class 대신 className 을 사용한다.

<div className="myDog">

// style 줄 때 객체 형태로 입힐 수 있고, 객체도 JavaScript 이므로 {} 안에 넣어야함.
// 결과적으로 {{ }} 형태로 넣게됨.

<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

- props

props :
- 컴포넌트 끼리의 데이터 교환 방식
- 부모, 자식간의 정보 교환 방식으로, 반드시 부모 -> 자식 방향으로만 흐른다.
- 반드시 읽기 전용으로 취급하며, 변경하지 않는다.

props 를 이용한 예시

import React from 'react'

function App() {
  return <GrandfaCompo />
}

function GrandfaCompo() {
  const name = "할아버지 컴포넌트"
  return <ParentsCompo grandfaName={name}/>
}

function ParentsCompo(props) {
  const gfName = props.grandfaName
  return <ChildCompo grnadfatherName={gfName}/>
}

function ChildCompo(props) {
  console.log(props.grnadfatherName)
  return (
    <div>나는 {props.grnadfatherName} 의 손자입니다.</div>
  )
}

export default App

먼저 GrandfaCompo 에서 name 변수를 선언하고 그 변수를 grandfaName 에 담아서 ParentsCompo 에게 준다. 이 때 ParentsCompo 는 props 로 정보를 받게되고, 그 정보는 props.grandfaName 로 접근 할 수 있고, gfName 에 담아서 grnadfatherName 라는 이름으로 준다. 마찬가지로 ChildCompo 도 props 로 정보를 받게되어 props.grnadfatherName 로 접근해서 결과적으로 GrandfaCompo 가 준 정보를 출력한다.