Udemy의 Build a Slack Chat App with React, Redux, and Firebase : Reed Barger 강의를 베이스로 Mock App을 만드는 것이 어떻냐는 추천을 받았는데, 해당 강의는 아쉽게도 React의 클래스형 컴포넌트로 작성이 되어 있다. 마침 클래스형을 함수형으로 바꾸는 연습이 필요했던 때라, 나는 강의를 참고하되 코드는 함수형으로 작성했다.

Firebase Setting: Auth / userDB 설계

기본적인 Firebase 셋팅을 마쳤으면, 이메일/비밀번호를 이용한 로그인/회원가입 방식을 사용하기 위해서 Authentication 메뉴의 이메일/비밀번호를 활성화시켜야 한다. 또한, 채팅을 위해 Realtime Database를 사용할 예정이기 때문에 user에 관련된 DB를 셋업하는 것 역시 필수다. Realtime DB는 JSON 형태로 저장되며, 나는 채팅에 필요한 정보가 유저의 이름과 그 유저의 아바타(프로필 사진)이기 때문에, 두 가지의 정보만 DB에 저장하려고 한다.따라서, 데이터 구조는 아래와 같이 설계했다.

{
  "users": {
    "user.uid(유저 고유 아이디)": {
      "name": 유저 이름,
      "avartar" : 유저 프로필 사진
    },
  }
}

Auth를 사용하여 유저 정보 만들기

회원가입 폼에 적힌 정보를 받아 Firebase Auth에 넘겨 주기는 매우 간단하다. 나는 handleSubmit이라는 함수를 작성해, 해당 함수가 실행되면 아래의 코드가 실행되도록 코딩했다.

  const handleSubmit = (event) => {
    event.preventDefault();
    // 중복 클릭 방지를 위해 disable 버튼 활성화
    setLoading(true);
    firebase
      .auth()
      .createUserWithEmailAndPassword(이메일, 패스워드)
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        console.log(errorCode, ":", errorMessage);
      });
  };

함수가 성공적으로 실행되면, Authentication의 Users에 전달한 정보가 잘 저장된다. 이제 이 정보를 Realtime Database에 넘겨야 한다.

보여질 닉네임과 아바타 설정하기

 const handleSubmit = (event) => {
    event.preventDefault();
    // 중복 클릭 방지를 위해 disable 버튼 활성화
    setLoading(true);
    firebase
      .auth()
      .createUserWithEmailAndPassword(이메일, 패스워드)
      .then((userCredential) => {
        const user = userCredential.user;
        user
          .updateProfile({
            displayName: 유저 설정 닉네임,
            photoURL: 프로필 사진 주소
          })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        console.log(errorCode, ":", errorMessage);
      });

firebase.auth().createUserWithEmailandPassword 함수는 이메일과 패스워드밖에 인자로 받지 않기 때문에, 따로 유저에게서 받아온 프로필 사진 정보와 닉네임을 저장해 주기 위해선 추가적인 설정이 필요하다. 해서, userCredential.user로 받아온 정보에 updateProfile 함수를 사용해 내가 원하는 정보를 입력해 주었다.

Realtime Database에 유저 정보 등록

Realtime Database에 동시적으로 정보가 저장되는 것이 아니기 때문에, 회원가입으로 받아온 정보를 DB에 넘겨주는 2차 작업을 해야 한다. 코드의 가독성을 위해, DB에 저장하는 함수는 따로 선언해 주었다.

const database = firebase.database().ref("users/");
// users는 DB의 최상위 노드
const saveUser = (user) => {
  return database.child(user.uid).set({
    name: user.displayName,
    avartar: user.photoURL,
    });
  };
// user로 받아온 값을 user.uid 값인 child 노드를 생성한다. 
// 이후 name / avatar 값을 덮어씌운다.
 const handleSubmit = (event) => {
    event.preventDefault();
    // 중복 클릭 방지를 위해 disable 버튼 활성화
    setLoading(true);
    firebase
      .auth()
      .createUserWithEmailAndPassword(이메일, 패스워드)
      .then((userCredential) => {
        const user = userCredential.user;
        user
          .updateProfile({
            displayName: 유저 설정 닉네임,
            photoURL: 프로필 사진 주소
          })
      // 이후, user의 값을 saveUser에 인자로 넘긴다
      .then(() =>
            saveUser(user).then(() => {
              console.log("User Saved");
            })
          )
          .catch((err) => {
            console.log(err);
          });

함수가 잘 실행이 됐다면, "User Save" 로그가 찍히며 Realtime DB에 잘 저장이 된다.

현재 실행되는 컨텍스트를 말한다. 여기서 컨텍스트는 값과 표현식이 "표현"되거나 참조 될 수 있음을 의미한다. 만약 변수 또는 다른 표현식이 "해당 스코프"내에 있지 않다면 사용할 수 없다. 스코프는 또한 계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접근할 수 있지만 반대는 불가하다.

• https://developer.mozilla.org/ko/docs/Glossary/Scope

2.2.2 var, let, const

• var 키워드로 선언한 변수와 let, const로 선언한 변수의 스코프는 다르게 동작한다.

2.2.2-1 var

• var 키워드로 선언한 변수는 중복 선언이 가능하다.
• var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다. 따라서 함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 된다.
• var 키워드로 변수를 선언하면 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작한다. 즉, 변수 호이스팅에 의해 var 키워드로 선언한 변수는 변수 선언문 이전에 참조할 수 있다. 단, undefined를 반환한다.

var x = 1;
if (true) {
 var x = 10 // 중복 선언됨
};

console.log(x); // 10

2.2.2-2 let

• let 키워드로 이름이 같은 변수를 중복 선언하면 문법 에러가 발생한다.
• let 키워드로 선언된 변수는 블록 레벨 스코프를 따른다.

let bar = 123;
let bar = 456; // syntax error

let foo = 1; // 전역 변수
{ 
    let foo = 2; // 지역 변수
    let bar = 3; // 지역 변수
}

console.log(foo); // 1
console.log(bar); // Reference error

2.2.2-3 const

• const 키워드는 상수를 선언하기 위해 사용된다.
• const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야 한다.
• const 키워드로 선언한 변수는 재할당이 금지된다. 단, 변수에 객체를 할당한 경우 값을 변경할 수 있다.

const foo = 1;
const foo; // 할당하지 않을 경우 syntax error 발생

SCOPE QUIZ

https://docs.google.com/presentation/d/1LKRodJXWMNqBDFL3Y3EUCtuUs0N-dq5r6HpCGaanXMg/edit?usp=sharing

따로 스코프 개념을 정확히 이해하기 위해 퀴즈를 만들어 풀어 보았다.

연산자란 프로그래밍에서 쓰이는 기호들이다. 연산자는 기본적으로 사용자에게 값(Value)을 변환(transform)할 수 있게 해 준다. 연산자에는 산술, 문자열, 증감, 비교, 대입, 삼항, 논리, 비트연산자 등이 있다.

논리 연산자 (Logical Operators)

• 💡 Before we start, False 값들을 알아보자!
  • 0
  • -0
  • false
  • undefined
  • null
  • ""
  • ''
  • ``
  • NaN

NOT Operator

• !를 이용해 표현한다.
• ! 뒤에 오는 값을 true(Boolean)으로 변환할 수 있다면 false를 반환한다. 그렇지 않을 경우 true를 반환한다.
• 결과적으로, false 값들은 ! 연산자를 사용할 경우 true로 반환된다.
• 종종 !!을 사용하는 경우를 볼 수 있는데, boolean 값으로 데이터를 활용하기 위함이다.

!true; // false
!2; // false
!"abc" // false

!false; // true
!0 // true
!undefined // true

Logical OR Operator

• ||로 표현한다.
• true나 false 값이 아닌 피연산자(operand) 값이 반환된다.

가동 프로세스는 다음과 같다.

1. 연산자 기준, 왼쪽부터 true 값을 찾는다.
2. True값을 찾은 경우 연산을 중지하고 해당 값을 반환한다.
3. 마지막까지 true 값을 찾지 못한 경우, 가장 마지막에 위치한 값을 반환한다.

Logical AND Operator

• &&로 표현한다.
• true나 false 값이 아닌 피연산자(operand) 값이 반환된다.

가동 프로세스는 다음과 같다.

1. 연산자 기준, 왼쪽부터 false 값을 찾는다.
2. false 값을 찾은 경우 연산을 중지하고 해당 값을 반환한다.
3. 마지막까지 false 값을 찾지 못한 경우, 가장 마지막에 위치한 값을 반환한다.

• optional-chaning
• props
• destructring (구조 분해 할당)
• container-presenter / atomic 패턴

optional-chaning

지난 주, useQuery API를 사용해 DB로부터 받아온 데이터를 렌더링할 때, 조건부 렌더링을 사용해 'undefined' 에러를 해결했었다. React의 state가 컴포넌트 변수인 점을 활용한 건데, event로부터 받아온 값이 컴포넌트 변수인 setData에 할당되어, 해당 변수가 호출이 되면 rerendering하는 React의 개념을 활용했다.

 const [data, setData] = useState({
   writer: "",
   password: "",
   title: "",
   contents: "",
  }); // data의 디폴트 값은 "", 그러나...

 const onChangeInput = (event) => {
   const userData = { ...data, 
                     [event.target.name]: event.target.value };
   setData(userData);
 }; // 여기서 이벤트로 받아온 값들을 setData에 할당

   data && data.fetchProfile
// && 연산자의 성질을 활용, data.fetchProfile이 false일 때 data를 반환, 
// data.fetchProfile이 true일 때는 data.fetchProfile을 반환

그러나 이 방법에는 문제가 있다. 현재 코드는 단 한 가지의 상황만 존재해 && 연산자를 사용해도 전혀 문제가 없었다, 하지만... 만약 내가 원하는 코드가 fetchProfile에서 더 타고 들어가야 한다면? 예를 들어......

data.fetchProfile.name.firstname.surname
data && data.fetchProfile && data.fetchProfile.name && data.fetchProfile.name.firstname && data.fet.... 어쩌구!
// name이 없는 경우가 있다면? firstname이 없다면?

경우의 수만 봐도 벌써 머리가 아프다. 이런 고민을 한 번에 날릴 수 있는 방법이 있으니 그게 바로 optional-chaning이다.

optional chaining 연산자는 참조나 기능이 undefined 또는 null일 수 있을 때 연결된 객체의 값에 접근하는 단순화할 수 있는 방법을 제공한다.

let nestedProp = obj.first && obj.first.second;
let nestedProp = obj.first?.second;
let nestedProp = ((obj.first === null || obj.first === undefined) 
        ? undefined : obj.first.second);

MDN: Optional chaning

optional chaning을 사용하면, 위의 data 케이스를 간단하게 정리할 수 있다.

data?.fetchBoard?.name?.firstname?.surname

Props & destructring (구조 분해 할당)

리액트는 크게 두 가지 특징이 있다.

• 선언형
• 컴포턴트 기반

리액트를 처음 접했을 때는, 어떻게 리액트가 UI 관리에 용이한지, 왜 컴포넌트 기반의 라이브러리인지 이해할 수 없었다.

개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. React: Components and Props

props는 부모 컴포넌트가 자식 컴포넌트에게 넘겨준 데이터와 기능등을 의미한다.

위의 그림은 오늘 미니 과제에서 사용했던 나의 코드이다. Component와 Props를 별개의 파일로 저장하여 관리하는 Container/Presenter 패턴을 사용했다. 이 패턴에 대한 내용은 밑에 이어진다.

앞서 우리는 props가 부모 컴포넌트로부터 자식 컴포넌트에게 넘겨준 데이터와 기능이라 설명했다. 즉 위의 그림대로라면 Container는 부모 컴포넌트이고, Presenter는 자식 컴포넌트가 된다. ViewUI는 Container인 QueryDetailPage 함수로부터 data 정보를 받아 ViewUI를 렌더링하게 된다. 이때 data는 props 가 된다.

여기서 한 가지 의문점이 생겼는데, props로 전달 받은 데이터는 props.원하는 데이터 형식으로 접근한다. 이 접근 방식은 Object의 value 값 접근 방식과 동일한데, 혹시 props를 디스트럭쳐링 할 수 있지 않을까, 생각이 들었다. 해서, props를 console.dir 해 보았다.

예상했던대로였다. 지금은 전달 받은 데이터의 갯수가 적으니 읽는데 무리가 없지만 나중에 수십 개의 props 내부 데이터를 처리할 때 props.AA, props.BB  방식으로 접근하면 가독성에 문제가 있을 것 같아 디스트럭쳐링을 했다.

좀 더 코드의 가독성이 좋아지고, 시멘틱해졌다.

container/presentor & atomic pattern

성균관코린이 님의: React Design Pattern

오늘 미니 과제에 사용한 디자인 패턴은 Container/Presentor 패턴이었다. 사용을 해 보며 내가 느꼈던 장점은 아래와 같았다.

• 재사용하기 굉장히 좋았다.
• 로직을 관리하는 공간, JSX를 렌더링하는 공간이 분리되어 유지보수가 편리하다.

Atomic 패턴은 디자이너와 협업하기 굉장히 좋다는데, 직접 사용해 본 것은 아니라 잘 모르겠다. 위에 링크된 글을 보며 좀 더 공부하는 시간을 가져야 할 것 같다.

코어 자바스크립트, 정재남 저 @

기본형(Primitive)과 참조형(Reference)를 구분하는 기준은 다음과 같다.

• 기본형은 연산 시 값이 담긴 주솟값을 복사한다.
• 참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제한다.

기본형은 불변성(immutability)를 띈다. 1-6에서 이 내용에 대해 좀 더 깊게 알아본다.

자바스크립트는 Dynamic typing 언어(동적 언어는 개발 속도가 빠르지만, 다양한 오류를 일으킬 수 있다. 정적 언어인 Typescript로 보완 가능하다)이다. 따라서 직접 데이터의 종류를 define할 필요 없으며, 데이터 종류는 자동적으로 할당된다.

1. String Type (문자열)

• " " 또는 ' ', 즉 따옴표를 이용해 표현한다. 어느 쪽을 사용하든 상관없으나 코드 내내 사용하는 따옴표는 통일하도록 하자.
• 문자열은 서로 더할 수 있음. 예를 들어, "I love"와 "chicken"이라는 두 개의 문자열이 존재하는 경우 "I love" + "chicken" = " I love chicken"을 만들 수 있다.
• 문자열은 유사 배열(Arry)이다. 유사 배열이기 때문에, index를 이용해 각 문자열에 접근이 가능하다. index는(indexOf, lastindexOf 등) 배열에서 지정된 요소를 찾을 수 있는 메서드이다.

console.log("chicken".legnth);
// expected output: 7
console.log("chicken".indexOf("C");
// expected output: 0

string 역시 유사 배열로 취급되기 때문에, 상기 코드와 같은 메서드를 실행시킬 수 있다. 아래 래퍼 객체에 대한 설명을 읽으면 이해가 쉽다.

2. Number Type (숫자열)

• 숫자는 말 그대로 '숫자'이다.
• 따라서 더하기, 빼기, 곱하기, 나누기 등의 연산이 가능하다.
• MDN의 Math 내장 객체를 사용하면 다양한 연산들이 가능하다. 쌍곡아크사인 같은 것도 가능하다. (https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math)
• Infinity 또는 -Infinity처럼 무한을 표현하는 값도 있다.
• NaN(Not A Number)이라는 값 역시 숫자이다.

Number("123");
// expected output : 123
Number("abc");
// expected output : NaN

하지만, typeOf를 사용할 경우

typeof(Number("123"))
"number"
typeof(Number("abc"))
"number"

"123"과 "abc" 값 모두 Number로 취급된다. NaN 역시 숫자값이기 때문.

막간을 이용해서...

1. Number() 등의 래퍼 객체란 무엇인가?

Data Type Diagram을 참고하면, JS에는 총 6개의 원시(Primitive) 데이터 타입이 있다.

Number, String, Boolean, null, undefined, symbol

이 원시 타입에 대응하기 위해, JS에는 래퍼 객체(wrapper object)라는 개념이 있다.

String(), Number(), Boolean(), Symbol()

래퍼 객체는 말 그대로, 원시 타입을 감싸는 형태의 객체이다.

원시형 데이터 타입은 본래 객체와 같이 메서드를 가질 수 없으나, JS는 일시적으로 'Number', 'String', 'Boolean', 'Symbol' 타입에 일시적으로 '객체'화가 되는 것을 허락하며, 따라서 메서드를 사용할 수 있게 된다. 즉 래퍼 객체는, 원시 타입 데이터를 객체화 시켜주는 개념이다.

3. Boolean Type

• True(참) 또는 False(거짓), 두 가지 값이 존재한다.
• 어떤 값이 Truthy하고, False한지는 후의 1-2 Operation에서 자세하게 후술.

4. Undefined / Null Type

Undefined Type이란?

• "없음 값"이다. 없다는 "값"이다. 값이 할당되지 않은 "값"인 것.

// 초기값이 할당되지 않은 변수
let hi;
console.log(hi); // undefined

// 초기값이 할당되지 않은 매개변수
function bye (a, b) {
  console.log(a); // 1
  console.log(b); // undefined
}
bye(1);

// 객체에서 존재하지 않는 속성을 접근하는 경우
const person = {
  age: '18'
};
console.log(person.height); // undefined

Null Type이란?

• "없음" 값이다. 값이 없다는 뜻이다.
• null === null is true
• undefined은 값이 아직 할당되지 않거나, 존재하지 않는 경우 사용하는 "없음"이다. null의 경우 존재하지 않는 "없음"이다. 아래 코드를 보자.

let greeting = [ "hi", "hello", ];
console.log(greeting);
// (2) ["hi", "hello"]
let greeting = null;
console.log(greeting);
// null

오늘의 code.camp 미니 과제

• KoreanJSON의 DB에서 axios를 이용해 자료를 가져와 화면에 뿌려주기
• GraphQL의 Mutation의 기능을 사용하여 DB에 게시글 전달하기

첫 번째 미니 과제의 경우 생각보다 빠르게 마무리할 수 있어 추가적으로 countIndex라는 변수를 만들어 버튼을 누를 때마다 다음의 데이터를 불러올 수 있는 기능을 추가하였다.

 const [titleFnfo, setTitleInfo] = useState("전달받은 정보가 표기됩니다.");
 const [content, setCotents] = useState("");
 const [updatedAt, setUpdatedAt] = useState("");
 const [count, setCount] = useState(1);

async function handleClickGetPost() {
    const datalength = await axios.get("https://koreanjson.com/posts");
    const data = await axios.get(`https://koreanjson.com/posts/${count}`);
    let date = new Date(data.data.updatedAt);
    let dateObject = {
      year: date.getFullYear(),
      month: String(date.getMonth() + 1).padStart(2, "0"),
      date: date.getDate() - 1,
    };
    let countIndex = count + 1;
    if (countIndex > datalength.data.length) {
      countIndex = 0;
    }
    setTitleInfo(data.data.title);
    setCotents(data.data.content);
    setUpdatedAt(`${dateObject.year}-${dateObject.month}-${dateObject.date}`);
    setCount(countIndex);

두 번째 미니과제를 진행하면서, 다시 한번 문서를 잘 읽어보는 습관이 필요하다는 것을 실감했는데. 무려 400 에러와 한 시간 동안 씨름을 했다.

이 화면과 약 한 시간 동안 씨름하며, 내 코드가 어디서 잘못됐는지 수도 없이 체크했는데, 코드에는 문제가 없었다. 아니, 문제는 있었지만 그건 코드의 문법 문제가 아닌 단순히 내 부주의의 문제였다.

그렇다. 리턴 값으로 지정되어 있지 않은 password를 요청하니 당연히 400 에러가 날 수밖에 없지. 이 사실을 깨닫고 코드 수정 후 정상 작동화면을 봤을 땐 솔직히 울고 싶은 심정이었다. 상식적으로 누가 비밀번호 찾기 기능도 아닌데 비밀번호 값을 리턴하냐고! 하지만 이것 또한 플레이그라운드 스키마를 정독하라는 자바스크립트 신의 계시라고 생각하기로 했다.

React Class형 Component의 Life-Cycle

React LifeCycle in ES6 by Simon Sturner

모든 React Component들은 반드시 세 가지 과정을 거친다.

• Mounting(마운팅): Component가 마운팅되거나, DOM에 Component가 추가될 때 발생.
• Updating(업데이팅): React가 props 또는 state의 변경을 감지했을 때 발생.
• Unmounting(언마운팅): React가 DOM tree로부터 Component를 제거할 때 발생.

Mounting Phase

React Component가 마운트될 때 발생하는 것들은 다음과 같다.

• constructor
• getDerivedStatefromProps
• render
• componentDidMount

constructor

constructor는 컴포넌트의 생성자 메서드로, 컴포넌트가 만들어질 때 가장 먼저 실행되는 메서드이다.

React의 특징

React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다. React란 무엇인가요? - React 공식 문서

리액트는, 간단히 설명하자면 UI를 위한 JS 라이브러리이다. 리액트는 컴포넌트 기반의 라이브러리로, 스스로 상태를 관리하는 캡슐화된 컴포넌트를 만들며, 이를 조합해 복잡한 UI를 만들어낼 수 있다. 즉, 리액트의 가장 기본은 컴포넌트이다. 리액트를 공부하면서, 공식 문서의 설명이 조금 부족하다고 느꼈었는데 React의 기본, 컴포넌트를 알아보자 - Jisu Park 님의 이 글이 아주 큰 도움이 되었다. 이 분의 비유대로 만일 React를 UI = View(State)라는 하나의 함수로 여긴다면, React의 특징이자 장점들을 아주 쉽게 이해할 수 있게 된다.

• 대부분의 함수가 그러하듯, 단방향 사고가 강제된다.
• state, props에 따른 렌더링 결과가 바뀌지 않는다. 즉, 불변성을 지킬 수 있다.
• 함수 내용을 정의하듯 JSX(React의 HTML 개념)을 통해 화면을 어떻게 렌더링할지 정의할 수 있다.
• 함수 간 합성이 가능하듯 컴포넌트끼리의 합성이 가능하다.

JSX란 무엇인가?

컴포넌트를 알아보기에 앞서, JSX를 먼저 공부했다. JSX는 간단히 설명하자면, React 전용의 HTML이다.

<div>
  <div class="title">제목</div>
  <button onclick="alert();">버튼</button>
</div> 
// 기존 HTML 방식

<div>
  <div className="title">제목</div>
  <button onClick="alert();">버튼</button>
</div>
// JSX 방식

JSX 코드를 보면 알겠지만, 기존의 HTML과 큰 차이는 없다. camalcase를 사용한다는 것 정도. 물론, 웹브라우저는 HTML, CSS, Javascript만 읽을 수 있기 때문에, 최종적으로 실행될 때는 React가 JSX를 HTML로 Babel을 통해 변환시켜 실행된다.

React의 Component란 무엇인가?

컴포넌트를 간단히 설명하자면 UI 또는 기능을 부품화하여 재사용 가능하게 하는 것과 같다. 나는 이 컴포넌트를 금형으로 이해했다. 큰 틀인 Component가 있다면, 우리는 그 틀 안에서 넣고 싶은 정보인 props를 집어넣는다. 핸드폰 케이스를 예를 들자면, 아이폰 12라는 모델의 금형에 내가 만들고 싶은 디자인을 집어넣어 최종적으로는 여러 종류의 아이폰 12 핸드폰 케이스를 만들 수 있다. 우리는 이것과 비슷한 개념을 잘 알고 있는데, 바로 함수이다. 그렇다, 컴포넌트는 function이다. React의 컴포넌트를 작성에는 두 가지 방법이 있다.

• 클래스형
• 함수형

최근 많은 기업들이 함수형 컴포넌트를 주로 사용한다고 하나, 기존에 만들어진 서비스들은 클래스형으로 되어 있는 경우도 많기 때문에 두 가지 선언 방식 모두 숙지해 둘 필요가 있다.

/// 클래스형 컴포넌트

import { Component } from 'react';

class New extends Component {
    render() {
        return <div>이것은 클래스형 컴포넌트이다.</div>
    }
}

export default New 

/// 함수형 컴포넌트

export default function New() {
  return <div>이것은 함수형 컴포넌트이다.</div>
}

/// 함수형 컴포넌트는 간단하게 화살표 함수(ES6)로도 정의할 수 있다.

const New = () => <div>이것은 화살표 함수로 선언한 함수형 컴포넌트입니다.</div>

export default New

물론 데이터는 각 컴포넌트에 맞게 변경하여 사용이 가능하다.

React는 왜 HTML을 JS 코드로 가져왔는가?

이 방식의 장점은 간단하다. 로직과 마크 업이 하나의 Component에 담기게 되면, 상세하게 나뉘어진 페이지들을 여러 유닛으로 나누어 관심사 분리를 할 수 있다. 예를 들어, 쇼핑몰 사이트에서 여성의류 Page가 있다면, 그 여성의류 Page 부모 Component 안에서 아우터, 상의, 하의 등의 자식 Component 등으로 props를 전달할 수 있게 된다. 이는 차후 서비스가 방대해질 때 유지보수가 편해지는 이점이 있다.

React는 Javascript를 효율적으로 사용할 수 있도록 도와주는 "라이브러리"이다. 페이스북, 인스타그램, 에어비앤비 등이 React를 채용하고 있으며, 코드캠프에서도 가장 중점적으로 배우게 될 스택이다. 라이브러리와 프레임워크의 차이점, React와 Vue 중 어느 것을 사용해야 할지 등의 글은 구글링만 해도 쏟아져 나옴으로 굳이 적지 않겠다.

바닐라JS를 사용한 코딩은 이전부터 해 왔지만, 리액트를 사용한 것은 처음이라 index.html, script.js, style.css의 심플한 구성에 익숙한 사람은 아마 위의 화면을 보고 겁부터 먹을 수 있다. 일단 내가 그랬기 때문이다. 하지만 이 보일러플레이트(사진의 것을 보일러플레이트라 부른다)는 생각보다 알기에 어렵지 않았다. 구성은 굉장히 간단하다.

1. node_modules npm, yarn 등을 사용해 다운로드 받은 라이브러리와 프레임워크의 저장소이다. 나의 경우 프로젝트를 진행하며 emotion/styled를 사용했고 "@emotion/styled"; 로 import했다.

2. pages 보여 줄 페이지들이 저장되어 있는 곳이다. 이런 식으로, board 폴더를 만들어 그 안에 FAQ 페이지를 만드는 방식으로 진행했다.

3. public 아이콘 등의 사진이 저장되어 있는 곳이다.

4. styles 이름부터 css 파일이 저장될 것 같은 곳이다. 실제로 css 파일이 저장되는 곳이다.

5. .gitignore push 시에 제외할 파일을 기록해 둔다.

6. package.json 사용설명서이다. 몇 번째 버전이고, 라이브러리나 프레임워크는 어떤 빌드를 사용했는지 기록해 두는 곳이다.

7. README.md 개발자들이 가장 먼저 읽게 될 첫 번째 친구, README 파일이다.

8. yarn.lock 위의 package.json 파일과 동일하나 어떤 버전의 라이브러리 / 프레임워크를 사용했는지 상세하게 기록된 파일이다. 열면 # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 라는 문구가 반긴다. 만지지 말자.