1화: Your First Component

Unsplash 의 Anastasiya Romanova 님 사진

 

이 글은 단순히 리액트 공식 문서를 읽고 베꼈을 뿐이다!! 학습 목적이라면 공식 문서를 보는 걸 추천한다.

 

공식 문서

https://react.dev/learn/your-first-component

Your First Component – React

 

컴포넌트란?

• 리액트의 핵심 개념 중 하나
• UI를 만드는 기본적인 토대
• 내 앱에 쓰는 재사용 가능한 UI element
• 마크업, css, js를 묶어주는 역할
• 내 프로젝트의 크기가 커지면 커질수록, 기존에 만들어 두었던 컴포넌트를 재사용해서 새로운 디자인을 만들 수 있음 -> 개발 속도 향상
• 결국 자바스크립트. 근데 이제 마크업을 좀 섞은

컴포넌트 만들기

1. export

다른 파일에서 컴포넌트를 쓰려면 밖으로 보내야겠지?

 

2. define

근본적으로 리액트 컴포넌트는 자바스크립트 함수로 정의함.

단, 이름은 반드시 대문자로 시작해야 하고 JSX를 반환함

 

3. add markup

JSX를 이용해서 마크업을 작성함. 마크업처럼 보여도 얘네 역시 근본은 자바스크립트로 작동함.

return 문에 마크업을 적으면 됨.

근데 여러 줄일 경우 소괄호로 감싸야 함. 그러지 않으면 return문 이후의 줄은 무시됨.

이 특성은 자바스크립트 문법과 automatic semicolon insertion 때문인데 이건 리액트가 아니라 ECMAScript language spec에 적혀있는 규칙임.

ESMAScript 문서에 적혀 있는 return문의 production rule

문법상 return과 Expression 사이에는 LineTerminator가 있으면 안 됨.

컴포넌트 쓰기

• 우리가 컴포넌트를 쓰더라도 결국 브라우저가 보는 건 기본 html 태그들로 이루어진 문서.
• 컴포넌트는 한 번만 정의함. 그걸 내가 원하는 곳에서 원하는 만큼 사용 가능함.
• 컴포넌트는 다른 컴포넌트를 렌더링할 수 있음.
• 하지만 컴포넌트 안에서 다른 컴포넌트를 "정의(define)" 해서는 안 됨. 트리의 같은 위치에 새로운 컴포넌트를 렌더링하면 state가 유지되지 않음. 컴포넌트 안에서 다른 컴포넌트를 정의하면 매번 새로운 함수가 생성되는 거라 다른 컴포넌트라고 판단함. 따라서 state를 유지할 수 없음.
• 자식 컴포넌트가 부모 컴포넌트로부터 어떤 정보를 받아야 한다면 props로 넘겨주기

온 세상이 컴포넌트

• 재사용성만을 기준으로 컴포넌트를 만들 필요는 없음.
• 컴포넌트는 UI 코드와 마크업을 묶는 유용한 방법임.
• 단 한 번만 사용하더라도 컴포넌트가 될 수 있음 (예-사이드바, 목록, 페이지 자체).
• 리액트 기반 프레임워크 중에는 리액트 컴포넌트로부터 HTML 파일을 자동적으로 만들어주는 애들도 있음. 이건 SSR 프레임워크 관련해서 말하는 것일 듯?
• 많은 웹사이트들은 리액트를 이미 존재하는 HTML 페이지에 상호작용들을 더하기 위해 사용함. 이건 웹페이지의 특정 부분에만 리액트 컴포넌트를 쓸 수 있다는 뜻인 듯?

읽고 나서

나는 '재사용성 있는 컴포넌트' 라 하면 '앞으로 죽을 때까지 우려먹을 수 있는 컴포넌트' 라고 생각하는 경향이 있다. 요즘 이런 기준이 너무 강한 것 같다는 느낌을 받는다. 우아한테크코스 수업에서 "혹시 모든 입력값을 완벽하게 처리할 수 있는 '슈퍼 인풋'을 만들고자 했던 건 아닌지?" 라는 말을 들었었다. 이 공식 문서에서도 'reusable UI elements for your app' 이라고 했지 'for the world' 라고 하지는 않았다. 내 성격은 이해하지만 그래도 너무 숲에만 집중하지 말자!