[TIL][React] JSX / Component

ddoni·2020년 12월 28일
TIL리액트위코드
0

JSX

  1. 개념
//자바스크립트 같이 생겼고, HTML 같이 생겼고 -> JSX 문법
const h1 = <h1>Hello world</h1>;

JSX는 자바스크립트의 확장된 문법이다. JSX는 리액트를 사용하기 위해 쓰여진다. 확장된 문법이란 유효한 자바스크립트가 아니여서 브라우저는 이해하지 못한다는 뜻이다. JSX 포함된 JS 파일이 웹 브라우저에 닿기 전에 JSX 컴파일러(바벨)는 정규 JS 언어로 해석해서 컴파일 후 전달해야한다.

  1. JSX 요소

JSX 요소는 JS 표현식 같이 변수에 할당하고 함수에 전달하고 객체나 배열에 저장하는 것이 가능하다.

const myTeam = {
  center: <li>Benzo Walli</li>,        //하이라이트 된 부분을 JSX 엘레먼트라고 부른다
  powerForward: <li>Rasha Loa</li>,
  smallForward: <li>Tayshaun Dasmoto</li>,
  shootingGuard: <li>Colmar Cumberbatch</li>,
  pointGuard: <li>Femi Billon</li>
};
  1. JSX요소 attribute

HTML 과 같이 JSX 요소에도 attribute 추가가 가능하다. attribute name 은 카멜케이스식으로 써준다.

✨ HTML 에선 class라고 쓰지만 JSX 에선 className이라고 써야한다. (이미 JS에는 class가 예약어이기 때문이다.)

  1. JSX요소 네스팅

HTML 마크업처럼 JSX 요소도 다른 요소 내에 네스팅 하는 것이 가능하다. HTML 컨벤션에 따라 줄바꿈, 띄어쓰기도 가능하다. 단!! 여러 줄인 경우 꼭 () 안에 써줘야한다. 또한, 꼭 하나의 컨테이너 요소에 묶여져 있어야 한다!!

(
  <a href="https://www.example.com">
    <h1>
      Click me!
    </h1>
  </a>
)
  1. JSX 표현식 렌더링 하기 (스크린에 보여지게 하기)

ReactDOM.render() 에 전달하여 렌더링할 수 있다. ReactDOM은 자바스크립트 라이브러리의 이름이다. ReactDOM.render() 는 JSX를 렌더하기 위한 메소드로 대응되는 DOM 노드 트리(virtual DOM)를 생성하고 DOM(real DOM)에 그 트리를 추가한다. 첫번째 인자로 JSX 표현식을 받고, 두번째 인자로는 첫번째 인자로 전달된 JSX 표현식이 보여질 위치를 지정하여 전달한다.

✨ ReactDOM.render() 는 오직 변경된 DOM 요소들만 업데이트한다.

  1. JSX에서의 셀프 클로징 태그

JSX에서 셀프 클로징 태그(input, br, img 같은)을 사용할땐 꼭 / 로 닫아줘야한다

  1. JSX에서 일반 자바스크립트 표현식 사용하기

JSX 문법에서 일반 자바스크립트 표현식을 사용하고싶은 경우는 { } 내에서 작성해주면 된다.

JSX 내에 작성된 JS 표현식은 파일 내에서의 다른 JS 환경의 일부분으로 속한다. → 같은 파일 내에서 선언된 다른 JS 표현식에 접근 가능하다.

// Declare a variable:
const name = 'Gerdo';
 
// Access your variable 
// from inside of a JSX expression:
const greeting = <p>Hello, {name}!</p>;
  1. JSX 에서 이벤트

HTML과 같이 JSX 요소도 이벤트 리스너를 가질 수 있다. 이벤트 리스너 attribute 이름은 onClick, onMouseOver 과 같이 on으로 시작 된다. 이벤트리스너 attr 값으론 함수가 와야한다.

function myFunc() {
  alert('Make myFunc the pFunc... omg that was horrible i am so sorry');
}
 
<img onClick={myFunc} />
  1. JSX에서 if문

JSX 내에 if 문을 쓰면 컴파일 문제로 작동하지 않는다. 아래와 같은 방법으로 조건문을 작성할 수 있다.

(1) 조건문을 작성하고 JSX 에 넣지 않고 렌더한다.

(2) ternary operator

const headline = (
  <h1>
    { age >= drinkingAge ? 'Buy Drink' : 'Do Teen Stuff' }
  </h1>
);

(3) &&

&&는 조건문인데 트루일 경우에만 실행되고 싶을때(거짓일 경우는 아무것도 실행되지 않음) 사용한다.

const tasty = (
  <ul>
    <li>Applesauce</li>
    { !baby && <li>Pizza</li> }
    { age > 15 && <li>Brussels Sprouts</li> }
    { age > 20 && <li>Oysters</li> }
    { age > 25 && <li>Grappa</li> }
  </ul>
);
  1. map()

map() 메소드는 리액트에서 리스트 아이템들을 생성할때 유용하게 쓰인다.

const people = ['Rowe', 'Prevost', 'Gare'];

const peopleLis = people.map((person, I) =>
<li key={'person_' + i}>{person}</li>
);

✨ JSX에서 리스트를 만들때에는 keys라고 불리는 JSX attr를 추가해줘야한다. keys 의 값은 id 와 같이 유니크한 값을 써야한다. 리액트가 리스트들을 추적하는데에 keys 값을 사용한다. (투두리스트와 같이 어떤 리스트가 완료되었고 안되었는지 체크하기 위해!)

  1. React.createElement()

실제 JSX가 컴파일되어 브라우저에 보여지는 방법은 JSX로 작성된 표현식은 React.createElement() 메소드에 의해 변환되는 것이다.

컴포넌트(Component)

  1. 개념

리액트 애플리케이션은 컴포넌트들고 구성되어있다. 컴포넌트란 하나의 작업(HTML 일부를 렌더하는)을 위한 작고 사용가능한 코드들이다.

  1. import React from 'react'; 리액트 라이프러리를 가져오는 방법

컴포넌트 내 상단에 써주는 코드로 React 라는 이름의 변수를 생성하고 값으로 특정 자바스크립트 객체를 생성하는 것을 의미한다. 임포트된 객체(React library)는 리액트를 사용하기 위해 필요한 메소드들을 포함한다.

  1. import ReactDOM from 'react-dom'; DOM에 반응하기 위한 방법

DOM과 반응하기 위한 메소드들을 사용하기 위한 객체를 생성한다.

  1. class YourComponentNameGoesHere extends React.Component {} 컴포넌트 생성하기

컴포넌트는 자바스크립트의 클래스나 함수를 이용하여 생성가능하다.

모든 컴포넌트들은 일반적으로 메소드들과 프로퍼티들을 가지게 되는데, 매번 같은 코드를 반복하여 작성하는 것보다 리액트 라이브러리로부터 Component 클래스를 확장하게 되면 리액트 라이브러리로부터 임포트된 코드를 사용할 수 있다.

React.Component 는 자바스크립트의 클래스이다. 자신만의 컴포넌트 클래스를 생성하기 위해선 React.component 의 하위클래스(subclass, 구현되어있는 클래스를 상속하는 것)로 만들어야한다.

✨ 클래스명은 반드시 대문자로 시작하는 카멜케이스식으로 작성되어야한다 (JSX가 HTML 태그와 구분하기 위해!)

✨ 컴포넌트 클래스 바디 내에는 컴포넌트가 어떻게 만들어야되는지에 대한 명시가 있어야 한다. 클래스에 명시된 프로퍼디 또는 메소드는 인스턴스 컴포넌트에 상속된다.

  1. render()

클래스 컴포넌트 내에는 반드시 render()가 포함되어야 하고 렌더 메소드는 return 키워드를 포함해야한다.

class ComponentFactory extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}
  1. 컴포넌트 인스턴스 생성하기

컴포넌트 클래스를 만든 후에는 컴포넌트 인스턴스 생성이 가능하다. 리액트 컴포넌트는 JSX 요소로 작성해주면 된다.

<MyComponentClass />
  1. 컴포넌트 내에 여러줄의 JSX 표현식 쓰기

여러줄의 JSX 표현식을 컴포넌트내에서 작성할려면 return 키워드 후 () 괄호 안에 써줘야한다.

class RedPanda extends React.Component {
  render() {
    return (
      <div>
        <h1>Cute Red Panda</h1>
        <img 
          src={redPanda.src}
          alt={redPanda.alt}
          width={redPanda.width} />
      </div>
    );
  }
}
  1. 간단한 계산 로직, if문

render() 내에는 컴포넌트가 렌더되기 전에 간단한 계산 로직, if문을 넣기 좋다.

꼭 리턴 되기 전에 써줘야한다!

class Random extends React.Component {
  render() {
    // First, some logic that must happen
    // before rendering:
    const n = Math.floor(Math.random() * 10 + 1);
    // Next, a return statement
    // using that logic:
    return <h1>The number is {n}!</h1>;
  }
}
  1. 컴포넌트 내 this 키워드

this 는 컴포넌트 인스턴스를 지칭한다.

class IceCreamGuy extends React.Component {
  get food() {
    return 'ice cream';
  }
 
  render() {
    return <h1>I like {this.food}.</h1>;  //this -> instance of IceCreamGuy
  }
}
  1. 컴포넌트 내 이벤트 리스너

컴포넌트 클래스에선 이벤트 핸들러를 메소드로 정의한다. 

class MyClass extends React.Component {
  myFunc() {
    alert('Stop it.  Stop hovering.');
  }
 
  render() {
    return (
      <div onHover={this.myFunc}>
      </div>
    );
  }
}
  1. 컴포넌트 리턴하기
class OMG extends React.Component {
  render() {
    return <h1>Whooaa!</h1>;
  }
}

//Crazy 컴포넌트 인스턴스는 OMG 컴포넌트 인스턴스를 리턴한다. ->Crazy는 <OMG />를 렌더한다.
class Crazy extends React.Component {
  render() {
    return <OMG />;
  }
}

✨ 리액트는 각 파일마다 독립된 스코프를 가지기 때문에 다른 파일에서 선언된 식별자를 사용하고 싶은 경우는 import 해줘야한다.

✨ 다른 파일에서 import 한 경우 import 된 파일 내에선 export를 해줘야한다. (식별자 앞에 export 키워드를 넣을 수 있고 전체를 export 하고 싶은 경우 하단에 추가해준다)

profile
ddoni
이전 포스트

[TIL]HTTP

다음 포스트

[TIL][React] Props / State

0개의 댓글