1. React Quick Start - React.dev 정리

 

배우게 될 것 

1. 컴포넌트를 만들고 중첩하는 방법 

2. 마크업과 스타일을 추가하는 방법 

3. 데이터 표시 방법 

4. 조건문과 리스트를 렌더링하는 방법

5. 이벤트에 반응하고 화면을 업데이트하는 방법

6. 컴포넌트 간 데이터를 공유하는 방법

---

1. 컴포넌트 생성 및 중첩 

React 앱은 컴포넌트로 구성되어 있다. 컴포넌트는 UI(User Interface)의 일부분으로 자체적인 로직과 외형을 가지고 있다. 컴포넌트는 작은 버튼일 수도 있고 혹은 전체 페이지처럼 커다란 요소일 수도 있다. 

 

React 컴포넌트는 마크업을 반환하는 JavaScript의 함수이다 :

function MyButton() {
  return (
    <button>
      버튼
    </button>
  );
}

이렇게 MyButton을 선언하였고, 이제 다른 컴포넌트와 중첩할 수 있다. 

export default function MyApp() {
  return (
    <div>
      <h1>리액트 시작하기</h1>
      <MyButton />
    </div>
  );
}

* <MyButton /> : 이와 같이 대문자로 시작하는 것이 리액트 컴포넌트임을 알 수 있는 요소이다. 리액트 컴포넌트의 이름은 반드시 대문자로 시작해야하며 HTML 태그는 소문자로 시작해야 한다. 

 

결과

* export default 키워드는 JavaScript에서 모듈 시스템을 사용할 때, 해당 모듈에서 기본으로 내보내는 값을 지정하는 구문이다. 

React 컴포넌트를 예로 들면, 하나의 파일에서 하나의 컴포넌트를 내보내고 싶을 때, 해당 키워드를 사용하여 다른 파일에서 해당 컴포넌트를 불러와 사용할 수 있다. 

 

 

 

---

 

 

 

2-1. JSX를 사용하여 마크업 작성하기 

위에서 본 마크업 구문을 JSX라고 한다. 이것은 선택사항이지만, 대부분의 React 프로젝트에서 JSX를 편리하기 때문에 사용하고 있다. 

 

  ※ JSX?

JavaScript의 확장 문법으로, React에서 UI를 표현하기 위해 사용된다. JSX를 사용하면 JavaScript 내부에 마크업을 작성할 수 있으며, 이를 컴파일하면 React 엘리먼트로 변환된다. 

JSX를 사용하면 HTML과 매우 유사한 구문으로 React 컴포넌트를 작성할 수 있다. 다만 HTML과는 다른 몇 가지 규칙을 가지고 있다. 

예를 들어, JSX에서는 모든 태그가 닫혀있어야 하며 속성 이름은 camelCase로 작성되어야 한다. 또한, JSX에서는 하나의 컴포넌트만 반환할 수 있으므로, 여러 요소를 반환할 경우에는 하나의 부모 요소로 감싸주어야 한다. 

export default function AboutPage() {
  return (
    <> 
      <h1>JSX?</h1>
      <p>
        안녕하세요. <br />
        나는 꼭 닫는 태그가 필요해요.
      </p>
    </>
  );
}

** <p><br> 두 개의 요소가 존재하기 때문에 <></>와 같은 Fragment을 사용하여 감싸주어 그룹화해야 한다.

** https://transform.tools/html-to-jsx 를 이용하여 변환 가능하다. 

 

 

2-2. 스타일 더하기 

React에서는 'className' 속성을 사용하여 CSS클래스를 지정한다. 이는 HTML class 지정하는 방법과 동일하다. 

export default function CssRule() {
  return ( 
    <h1 className = "myClass">className 지정하기</h1> 
  );
}

CSS 규칙은 CSS파일에서 작성한다. 

.myClass{
  color: red;
  font-style: italic;
}

결과

* React는 CSS파일을 추가하는 방법을 규정하지 않는다. 가장 간단한 방법은 HTML에 <link>를 추가하는 방법이 있다.

 

 

 

---

 

 

 

3. 데이터 표시 방법 

중괄호를 사용하여 코드에 변수를 가져와 사용자에게 표시할 수 있다. 

예를 들어, 다음은 user.name을 표시한다. 

const user = {
  name: "홍길동", 
  age: "30"
}

export default function DisplayingData() {
  return ( 

    <h1>
      이름: {user.name} <br />
      나이: {user.age}세
    </h1>
    
  );
}

결과

 

JSX 속성에서도 중괄호를 사7용하여 JavaScript 코드를 삽입할 수 있다. 대신, 따옴표 대신 중괄호를 사용해야 한다. 

예를 들어, className = "myClass"는 "myClass" 문자열을 CSS 클래스로 전달하지만, src={user.imgUrl}는 JavaScript user.imgUrl의 값을 읽은 다음, 그 값을 src 속성으로 전달한다. 

const user = {
  name: "홍길동", 
  age: "30",
  imgUrl: "https://img1.daumcdn.net/thumb/C500x500/?fname=http://t1.daumcdn.net/brunch/service/user/6qYm/image/eAFjiZeA-fGh8Y327AH7oTQIsxQ.png"
}

export default function DisplayingData() {
  return ( 

    <h1>
      이름: {user.name} <br />
      나이: {user.age}세 <br />
      <img src={user.imgUrl} className="myImg"/>
    </h1>
    
  );
}

 

 

JSX 중괄호 안에는 더 복잡한 표현식도 넣을 수 있다. 예를 들어, 문자열 병합도 가능하다. 

const gildong = {
  name: "홍길동",
  imgUrl: "https://pbs.twimg.com/profile_images/1071062493013766144/5NXGjrF3_400x400.jpg",
  imgSize: 90
};

export default function HongGildong() {
  return ( 

    <>
      <h1>{gildong.name}</h1>
      <img src={gildong.imgUrl}
           alt={gildong.name + '의 사진'}
           stype={{
             width: gildong.imgSize,
             height: gildong.imgSize
           }}/>
    </>
    
  );
}

 

 

 

---

 

 

 

4-1. 조건문 렌더링하기 

React에서는 조건문을 작성하는 특별한 구문은 없다. 대신, 일반적인 JavaScript 코드를 작성할 때 사용하는 기술을 사용할 수 있다. 

예를 들어, if문을 사용하여 JSX를 조건부로 포함할 수 있다. 

export default function Contional() {

  let a = 1;
  let result;

  if(a == 1){
   result = "일"
  } else {
   result = "이"
  }

  return (
   <div>
    a는 {result}
   </div>
  );
  
}

만약, 조금 더 간결한 코드를 원하다면 ? 연산자를 사용할 수 있다. if와 달리 JSX 내부에서도 동작한다. 

export default function Contional() {

  let a = 2;
  let result;
  
  return(

    <p>
      {a == 1 ? (
        result = "a는 일"
      ) : (
        result = "a는 일이 아님"
      )}
    </p>
  
  );
}

만약 else 구문이 필요 없다면, &&를 사용하여 더 짧게 작성할 수 있다. 

export default function Contional() {

  let a = 1;
  
  return(

    <p>
      {a == 1 && "a는 1"}
    </p>
  
  );
}

 

4-2. 리스트 렌더링하기 

React에서는 컴포넌트 리스트를 렌더링할 때 for문과 배열 map() 함수와 같은 JavaScript 기능을 사용한다. 

예를 들어, 아래 'books' 배열이 있다고 가정해보자. 

const books = [
  {title: "해리포터", id : 1},
  {title: "어린왕자", id : 2}, 
  {title: "홍길동전", id : 3}
];

이 컴포넌트 내부에서, map() 함수를 사용하여 'books' 배열을 <li> 요소 배열로 변환한다. 

export default function Contional() {

  const listItems = books.map(book =>
    <li key={book.id}>
      {book.title}
    </li>
  );

  return (
    <ul>{listItems}</ul>
  );
  
}

list의 각 아이템들은 그 형제들 중 해당 아이템을 고유하게 식별하는 문자열 혹은 숫자와 같은 키(key)를 전달하여야 한다. 일반적으로 key는 ID와 같이 데이터에서 가져온 것을 사용한다. React는 key를 사용하여 항목을 나중에 삽입, 삭제 또는 재정렬할 때 무슨 일이 일어났는지 파악하여 효율적으로 리스트 아이템을 관리할 수 있다. 

 

const books = [
  {title: "해리포터", isKorean: false, id : 1},
  {title: "어린왕자", isKorean: false, id : 2}, 
  {title: "홍길동전", isKorean: true, id : 3},
];


export default function MyBookList() {

  const listItems = books.map(book =>
    <li key={book.id}
        style={{
          color: book.isKorean ? 'hotpink' : 'pink'
        }} >
      {book.title}
    </li>
  );

  return (
    <ul>{listItems}</ul>
  );
  
}