React - 공식문서 읽어보기

JSX

자바스크립트를 확장한 문법으로 자바스크립트의 모든 기능이 포함되어 있고, React에서 요소(element)를 생성합니다 . JSX 사용이 필수는 아니지만 UI 관련 작업을 할때 가독성이 훨씬 좋다고 할 수 있습니다. 간단히 말하면 React.createElement의 간편 표현식이다.

 

JSX - 표현식

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

위 코드에서 볼 수 있듯이 JSX에서는 변수를 포함한 모든 표현식을 중괄호('{}')안에 넣어야합니다. 

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

그리고 사실 JSX 자체도 표현식입니다. 조건문이나 반복문 혹은 변수나 함수로부터 반환을 받을 수 있습니다. 

 

 JSX - 속성 정의

const element = <img src={user.avatarUrl}></img>;

자바스크립트 표현식을 JSX안에 속성값으로 삽입할때도 중괄호('{}')로 입력하고, 어트리뷰트(속성) 이름은 HTML에서의 이름대신 camelCase 명명 규칙을 사용합니다. 예) class -> className  /  tabindex -> tabIndex

 

JSX - 주입공격 방지 

JSX 삽입된 모든 값을 렌더링하기 전에 이스케이프하므로, 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않습니다. 렌더링 되기 전에 문자열로 변환됩니다. XSS(cross-site-scripting) 공격 방지한다. 

 

---

Components 와 Props

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

const element = <Greeting name="Evan" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

React가 사용자 정의 컴포넌트로 작성한 요소를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에  단일 객체로 전달합니다. 이 객체를 props라고 부릅니다. 여기서 일어나는 일을 순서대로 나열을 해본다면 

1.  <Greeting name ="Evan" />  요소가 ReactDOM.render()를 호출합니다. 
2. React는 name="Evan" 를 props 로 하여 Greeting 컴포넌트를 호출합니다.
3. Greeting 컴포넌트는 <h1>Hello, Evan</h1> 요소를 반환합니다.
4. React DOM에서 그 요소와 일치하도록 DOM을 효율적으로 업데이트합니다.

컴포넌트 특) 이름은 항상 대문자로 시작해야합니다. 소문자로 시작하면 컴포넌트를 DOM 태그로 처리합니다. 

 

Component 합성

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

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

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

위에 코드를 보면 알 수 있듯이 App이라는 컴포넌트 안에 Welcome이라는 컴포넌트를 참조해서 렌더링하는 거를 볼 수 있다.

 

Component 추출

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
             src={props.author.avatarUrl}
             alt={props.author.name} />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

위와 같은 Comment 라는 컴포넌트가 있다. 지금도 물론 잘 작동하겠지만, 이 컴포넌트 안에 요소를 추출을 해보려고 한다. 

function Avatar(props){
  return (
    <img className="Avatar"
             src={props.user.avatarUrl}
             alt={props.user.name} />
  );
}

function UserInfo(props){
  return (
    <div className="UserInfo">
        <Avatar user={props.user}/>
        <div className="UserInfo-name">
          {props.user.name}
        </div>
      </div>
  )
}

function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo user={props.author}/>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

이렇게 먼저 Avatar라는 컴포넌트를 만들고 UserInfo라는 컴포넌트를 만들어서 아바타를 UserInfo에 합성을 시켰다. 결론적으로는 기존 Comment 컴포넌트에서 요소들을 추출하여 Avatar와 UserInfo 라는 컴포넌트 새로 만들었다.

하지만 이렇게 하는 이유가 무엇일까? 

바로 답은 재활용성이다.  이렇게 작은 프로젝트말고 좀 더 프로젝트가 커질수록 이런 컴포넌트 추출은 빛을 바란다는데,  예를 들면 버튼같은 것들이 있다. 

 

Props는 읽기 전용이다.

 

함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안되는데, 이유를 살펴보자.

function sum(a, b) {
  return a + b;
}

이런 함수는 순수 함수라고 호칭합니다. 순수 함수는 입력값을 바꾸려하지 않고 동일한 입력값에 대해 항상 동일한 결과를 반환하기 때문이죠.  반면에 밑에 함수 코드를 보시죠.

function withdraw(account, amount) {
  account.total -= amount;
}

입력값을 바꾸려하고 있습니다. 이렇게 되면 안된다고 말하는 겁니다. React에서 컴포넌트는 자신의 props를 다룰 때 반드시 순수함수 처럼 동작해야합니다. 하지만 저렇게 하는 방법이 없는건 아닙니다. useState를 사용하는 겁니다. 그거는 다음에 다룰 때 보도록 하겠습니다.