1. JSX란?

JavaScript eXtension로 자바스크립트의 확장버전
React에서 HTML을 표현할 때, JSX를 사용

주의할 점

JSX 속성 정의

따옴표를 이용해 문자열 리터럴을 정의
const element = <div tabIndex="0"></div>;

중괄호를 사용하여 어트리뷰트에 JavaScript 표현식을 삽입
const element = <img src={user.avatarUrl}></img>;

JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용
class (X) => className (O)
tabindex (X) => tabIndex (O)

2. 함수컴포넌트

컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

React 엘리먼트는 사용자 정의 컴포넌트로도 나타낼 수 있습니다.

• 방법 1)

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App(){
  return (
    <Welcome name="Sara" />
  )
}

• 방법 2)

function Welcome({name}) {
  return <h1>Hello, {name} </h1>;
}

function App(){
  return (
    <Welcome name="Sara" />
  )
}

결과 : 둘다 Hello, Sara 로 같고 단지 props로 매개변수를 받나 그안의 값으로 받나 차이

3. 동작원리

• index.js에서 동작

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

App 컴포넌트가 필요해

• App.js에서 동작

function Welcome({name}) {
  return <h1>Hello, {name} </h1>;
}

function App(){
  return (
    <Welcome name="Sara" />
  )
}

export default App

App을 export하고 해당 return 하는 JSX부분은 Welcome이라는 함수컴포넌트로 작성된 리턴된 부분으로 name을 props로 하여 처리

4. 이벤트 핸들러

React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용합니다. ex) onclick => onClick
JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다.

<button onClick={activateLasers}>
  Activate Lasers
</button>

이벤트 핸들러에 인자 전달

const deleteRow =(a,b) =>{
  console.log(a,b)
}

function App(){
  return (
    <button onClick={(e) => deleteRow(100, 1000)}>Delete Row</button>
  )
}

export default App

버튼을 누르면 deleteRow함수가 실행되어 100,1000이 출력된다

5. 조건부 렌더링

if 나 조건부 연산자 와 같은 JavaScript 연산자를 현재 상태를 나타내는 엘리먼트를 만드는 데에 사용

if 조건문

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

function App(){
  return (
    <div>
    <Greeting isLoggedIn={true} />
    <Greeting isLoggedIn={false} />
    </div>
  )
}

export default App

• Greeting 함수컴포넌트는 받아온 props의 isLoggedIn의 속성에 따라 UserGreeting이 될 수도 GuestGreeting이 리턴 될 수도 있다.
• 현재는 위쪽은 UserGreeting을 아래쪽은 GuestGreeting의 함수 컴포넌트 리턴 부분을 처리한다.

• 결과
  Welcome back!
  Please sign up.

&& 조건문 (중괄호 안의 if 표현식)

&& 뒤의 엘리먼트는 조건이 true일때 출력

function App(){
  return (
    <div>
      {100>0 && <h1>보이지?</h1>}
    </div>
  )
}

• 결과
  보이지? 브라우저상에 출력

삼항연산자 (중괄호 안의 if else 표현식)

function App(){
  return (
    <div>
      {100<0 ?  <h1>나는 안보일거야</h1> : <h1>보이지?</h1> }
    </div>
  )
}

• 결과
  보이지? 브라우저상에 출력

---

function App(){
  if(100>0)
    return (
      <div>
        <h1>나는 보일거야~</h1>
      </div>
    )
  else
    return (
      <div>
        <h1>나는 안보일거야</h1>
      </div>
    )
}

삼항연산자가 좀 더 깔끔하다.

6. 반복 렌더링

방법 1

map()함수를 이용
엘리먼트 모음을 만들고 중괄호 {}를 이용하여 JSX에 포함

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

function App(){
  return <ul>{listItems}</ul>
}

결과

• 1
• 2
• 3
• 4
• 5

---

방법 2

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5, 6];

function App(){
  return <NumberList numbers={numbers} />
}

결과

• 1
• 2
• 3
• 4
• 5
• 6

• 일반적으로 컴포넌트 안에서 리스트를 렌더링한다

7. Key

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.

Key를 사용하는 위치

1. A컴포넌트를 추출한 해당 A 엘리먼트에 key를 부여해야한다.
2. map() 함수 내부에 있는 엘리먼트에 key를 넣어주기

function ListItem(props) {
  const value = props.value;
  return (
    // 틀렸습니다! 여기에는 key를 지정할 필요가 없습니다.
    <li key={value.toString()}>
      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 틀렸습니다! 여기에 key를 지정해야 합니다.
    <ListItem value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

• ListItem 컴포넌트를 추출 한 경우 ListItem 안에 있는 <li> 엘리먼트가 아니라 배열의 <ListItem /> 엘리먼트가 key를 챙긴다
• map이 <ListItem>에 적용되므로 거기에 key를 적용시킨다.

Key를 작성하지 않을 경우

function ListItem(props) {
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <ListItem  value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];

function App(){
  return <NumberList numbers={numbers}></NumberList>
}

• index.js:1 Warning: Each child in a list should have a unique "key" prop.
  해당 경고가 뜬다.

Key를 작성할 경우

function ListItem(props) {
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <ListItem key={number.toString()} value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];

function App(){
  return <NumberList numbers={numbers}></NumberList>
}

출처