9/14 TIL

최준호·2022년 9월 14일

< 목차 >

jsx란?
Components와 Props
회고

1. jsx란?

React에서 본질적으로 렌더링 로직이 UI로직과 연결된다는 사실을 받아들인다.

React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신에 둘 다 포함하는 '컴포넌트'라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리한다.

React에서 jsx의 사용이 필수는 아니다. 하지만 대부분의 사람들은 javascript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움의 된다고 생각한다. 또한 React에 도움이 되는 에러 및 경고 메시지를 표시해준다.

1-1) jsx에 표현식 포함하기

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

jsx 중괄호 안에는 모든 유효한 javascript표현식을 넣을 수 있다.
javascript 함수 호출 결과를 엘리먼트에 포함시킬 수 있다.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName : 'Harper',
  lastName : 'Perez'
};

const element = (
  <h1>
  	Hello, {formatName(user)}
  <h1>
);

jsx도 표현식이다.

컴파일이 끝나면 jsx표현식이 정규 javascript 함수 호출이 되고 javascript객체로 인식된다.

-> jsx를 if구문 및 forloop안에 사용하고, 변수 할당 및 인자로 받아들이고 함수로 반환할 수 있다.

1-2) jsx는 객체를 표현한다.

Babel은 jsx를 React.createElement() 호출로 컴파일한다.

다음 두 예제는 동일하다.

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement()는 버그가 없는 코드를 작성하는 데 도움이 되도록 몇 가지 검사를 수행하며, 기본적으로 다음과 같은 객체를 생성합니다.

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

2. Components와 Props

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

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

이 함수는 데이터를 가진 하나의 'props' 객체 인자를 받은 후에 react 엘리먼트를 반환하기 때문에 유효한 react 컴포넌트이다.
이러한 컴포넌트는 javascript 함수이기 때문에 '함수 컴포넌트'라고 호칭한다.

2-1) 컴포턴트 렌더링

const element = <div />;

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

const element = <Welcome name= 'Jun' />;
-React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 jsx attribute와 자식을 해당 컴포넌트 단일 객체로 전달한다. 이 객체를 'props'라 부른다.

페이지에 'Hello, Jun'을 렌더링 해보았다.

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

const root = ReactDOM.creatRoot(document.getElementById('root'));
const element = <Welcome name = 'Jun' />;

<Welcome name = 'Jun' /> 엘리먼트로 root.render()를 호출한다.
React {name: 'Jun'}를 props로 하여 Welcome 컴포넌트를 호출한다.
Welcome 컴포넌트는 결과적으로 <h1>Hello, 'Jun'</h1> 엘리먼트를 반환한다.
ReactDOM은 <h1>Hello, 'Jun'</h1> 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트 한다.

2-2) 컴포넌트 합성

컴포넌트는 현재 출력에 다른 컴포넌트를 참조할 수 있다. 모든 세부단계에서 동일한 추상 컴포넌트를 사용할 수 있다. React앱에서는 버튼, 폼, 다이얼로그, 화면 등의 모든 것들이 흔히 컴포넌트로 표현된다.

< 예제 >

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

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

일반적으로 새 React 앱은 최상위에 단일 App 컴포넌트를 가지고 있다. 하지만 기존 앱에 React를 통합하고 있는 경우에는 Button과 같은 작은 컴포넌트부터 시작해서 뷰 계층의 상단으로 올라가면서 점진적으로 작업해야 할 수 있다.

2-3) 컴포넌트 추출

컴포넌트를 여러개의 작은 컴포넌트로 나눌수 있다.

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>
  );
}

컴포넌트는 author(객체), text(문자열) 및 date(날짜)를 props로 받은 후 소셜 미디어 웹 사이트의 코멘트를 나타낸다.

< Avatar 추출식>

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

Avatar는 자신이 Comment 내에서 렌더링 된다는 것을 알 필요가 없다. 하여 props의 이름을 author에서 더욱 일반화된 user로 변경해준다.

props는 읽기 전용이다.

함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안된다.
모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 한다.

< 순수함수란? 입력값을 바꾸지않고 항상 동일한 입력값에 대하여 동일한 결과를 반환하는 함수 >

3. 회고

오늘은 유효성 검사를 위한 과제 제작을 끝낸 후에 곧 있을 리액트 스터디 시작을 대비하여 공식문서를 학습하였다. 전에 노마드코더에서 영화 웹사이트 클론코딩을 진행해봤었는데 따라치는 느낌이 없잖아 있었다. 다시금 기초부터 이해를 하면서 학습을 하여 컴포넌트를 트랜디하게 구현하는법을 익히고 싶다.