2일차 스터디 - React Basic 1

03 August 2021 - 3 mins read time
Tags: JavaScript React

React Basic

JSX

const element = <h1>Hello, world!</h1>;

위에 희한한 태그 문법을 JSX라 하며 JavaScript를 확장한 문법입니다.

JavaScript의 모든 기능이 포함되어있습니다.

JSX란?

React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.

JSX에 표현식 포함하기

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

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

JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있습니다.

JSX 속성 정의

속성에 따옴표를 이용해 문자열 리터럴을 정의할 수 있습니다.

const element = <div tabIndex="0"></div>;

중괄호를 사용하여 어트리뷰트에 JavaScript 표현식을 삽입할 수도 있습니다.

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

JSX로 자식 정의

JSX 태그는 자식을 포함할 수 있습니다.

만약 태그가 비어있다면 XML처럼 /> 를 이용해 바로 닫아주어야 합니다.

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

Components와 Props

함수 컴포넌트와 클래스 컴포넌트

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

// Array Function
const Welcom = (props) => <h1>Hello, {props.name}</h1>;

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

React의 관점에서 볼 때 위 두 가지 유형의 컴포넌트는 동일합니다.

컴포넌트 렌더링

React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달합니다. 이 객체를 “props”라고 합니다.

다음은 페이지에 “Hello, Wooseok”를 렌더링하는 예시입니다.

props는 읽기 전용입니다.

함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안 됩니다.

리액트 라우터

라우팅 라이브러리는 크게 리액트 라우터, 리치 라우터, Next.js 가 있습니다.

우리는 가장 흔하게 쓰이는 React-Router를 사용할 예정입니다.

라우터(Router)

  1. HashRouter
    1. 해시부분(window.location.hash)을 URL과 동기화하여 UI를 유지합니다.
  2. BrowserRouter
    1. Browser의 URL과 동기화하여 UI를 유지합니다.

라우트(Route)

URL의 path와 UI를 매칭 시켜 렌더링한다.

<Router>
  <Route path="/user/:username" component={User} />
</Router>

위에서는 path(URI)가 /user/wooseok 과 같이 들어올때 User라는 컴포넌트를 렌더링해서 보여준다.

이때 wooseok은 username 이라는 key로 props로 들어가게됩니다.

Application 주위에 선언적이고 액세스 가능한 탐색을 제공합니다.

<Link to="/about">About</Link>

위 Link는 /about으로 이동하는 a tag로 렌더링되며 Single Page Appication이 되는 링크를 제공합니다.

과제

스터디 2일차 과제 (forked)

아래와 같이 결과물이 나오면 됩니다

  1. Single Page Application이어야 합니다.
  2. Components 와 Screens 를 폴더를 구분하여 작업해야 합니다
    1. src/components: Component 만 생성
    2. src/screens: Router로 보여지는 Component만 생성

ezgif.com-gif-maker.gif