Will's Log

[Typescript] 타입 가드란? 타입 가드 개념과 쓰는 이유 예시로 파헤치기

Will_ — Sun, 6 Oct 2024 21:44:44 +0900

안녕하세요, 윌입니다.

오늘은 타입 가드에 대한 설명과 사용 이유에 대해 파헤쳐 보겠습니다.

타입 가드에 대해 이해하기 위해선 먼저 Interface, 유니온 타입( | 연산자) 등에 대한 선행 학습이 필요합니다.

아래와 같은 2개의 interface가 있습니다. Developer와 Person은 name을 가지지만 각 skill, age를 가진다는 점에서 다릅니다.

interface Developer {
  name: string;
  skill: string;
}
interface Person {
  name: string;
  age: number;
}

tony라는 객체를 만들어보겠습니다. tony는 age, skill을 모두 가지는 객체입니다.

그러나 tony.skill 또는 tony.age로 접근 시 타입에러가 발생됩니다. 유니온 타입의 경우 공통된 속성만 접근할 수 있기 때문입니다.

function introduce(): Developer | Person {
  return {
    name: "tony",
    age: 30,
    skill: "js",
  };
}

let tony = introduce();

tony.skill //type error:'Developer | Person' 형식에 'skill' 속성이 없습니다. 
'Person' 형식에 'skill' 속성이 없습니다.ts(2339)

이 때 타입 가드를 사용합니다.

아래 예시를 보면 isDeveloper 함수를 선언하고, 해당 함수의 타입을 target is Developer로 선언하였습니다.

함수 타입을 Developer로 제한 함으로써 Developer의 속성인 skill에 접근할 수 있으며, 또한 if else를 이용해 Developer가 아닐 경우 Person으로 타입이 좁혀져 age에 접근이 가능합니다.

function isDeveloper(target: Developer | Person): target is Developer {
  return (target as Developer).skill !== undefined;
}

if (isDeveloper(tony)) {
  console.log(tony.skill); // type error 없음
} else {
  console.log(tony.age); // Person type으로 인식되어 age 접근이 가능함
}

이런 식으로 유니온 타입의 경우 타입 가드를 사용하여 타입 에러 없이 객체 속성에 접근할 수 있습니다.

[JavaScript] '==' 와 '==='의 차이? (비교 연산자 파헤치기)

Will_ — Wed, 10 Jul 2024 08:00:30 +0900

안녕하세요, 윌입니다.

이번엔 비교 연산자에 대한 정리입니다.

자바스크립트에서 비교 연산자는 두 값의 관계를 비교하여 결과를 반환하는 연산자입니다.

비교 연산자는 주로 조건문이나 반복문에서 많이 사용됩니다.

자바스크립트에는 여러 가지 비교 연산자가 있으며, 각각의 의미와 용법은 다음과 같습니다:

1. 동등 연산자 (==)

두 값이 같은지 비교하며, 필요에 따라 형 변환을 수행합니다.

console.log(5 == '5'); // true (숫자와 문자열을 비교하며 형 변환이 발생)
console.log(0 == false); // true (숫자 0과 불리언 값을 비교하며 형 변환이 발생)

2. 일치 연산자 (===)

두 값이 같은지 비교하며, 형 변환을 수행하지 않습니다. 값과 자료형이 모두 같아야 합니다.

console.log(5 === '5'); // false (형 변환을 하지 않기 때문에 다름)
console.log(0 === false); // false (자료형이 다르기 때문에 다름)
console.log(5 === 5); // true (값과 자료형이 모두 같음)

3. 부등 연산자 (!=)

두 값이 다른지 비교하며, 필요에 따라 형 변환을 수행합니다.

console.log(5 != '5'); // false (형 변환 후 값이 같음)
console.log(0 != false); // false (형 변환 후 값이 같음)

4. 불일치 연산자 (!==)

두 값이 다른지 비교하며, 형 변환을 수행하지 않습니다. 값과 자료형이 모두 달라야 합니다.

console.log(5 !== '5'); // true (형 변환을 하지 않기 때문에 다름)
console.log(0 !== false); // true (자료형이 다르기 때문에 다름)
console.log(5 !== 5); // false (값과 자료형이 모두 같음)

5. 크다 (>)

왼쪽 값이 오른쪽 값보다 큰지 비교합니다.

console.log(10 > 5); // true
console.log(5 > 10); // false

6. 크거나 같다 (>=)

왼쪽 값이 오른쪽 값보다 크거나 같은지 비교합니다.

console.log(10 >= 5); // true
console.log(5 >= 5); // true
console.log(5 >= 10); // false

7. 작다 (<)

왼쪽 값이 오른쪽 값보다 작은지 비교합니다.

console.log(5 < 10); // true
console.log(10 < 5); // false

8. 작거나 같다 (<=)

왼쪽 값이 오른쪽 값보다 작거나 같은지 비교합니다.

console.log(5 <= 10); // true
console.log(5 <= 5); // true
console.log(10 <= 5); // false

9. 객체 비교

객체 비교 시에는 두 객체가 동일한 객체인지 (참조가 같은지) 비교합니다.

값이 같더라도 참조하는 주소가 다르면 false가 됩니다.

let obj1 = { name: 'Alice' };
let obj2 = { name: 'Alice' };
let obj3 = obj1;

console.log(obj1 == obj2); // false (서로 다른 객체)
console.log(obj1 === obj2); // false (서로 다른 객체)
console.log(obj1 === obj3); // true (같은 객체)

요약

== : 값이 같은지 비교 (형 변환 수행)
=== : 값과 자료형이 같은지 비교 (형 변환 수행하지 않음)
!= : 값이 다른지 비교 (형 변환 수행)
!== : 값과 자료형이 다른지 비교 (형 변환 수행하지 않음)
> : 왼쪽 값이 오른쪽 값보다 큰지 비교
>= : 왼쪽 값이 오른쪽 값보다 크거나 같은지 비교
< : 왼쪽 값이 오른쪽 값보다 작은지 비교
<= : 왼쪽 값이 오른쪽 값보다 작거나 같은지 비교

이러한 비교 연산자들은 조건문 (if, else if, else)이나 반복문 (for, while) 등에서 자주 사용됩니다. 각각의 연산자가 어떻게 동작하는지 이해하고 사용하는 것이 중요합니다.

[JavaScript] undefined vs null vs NaN 파헤치기

Will_ — Tue, 9 Jul 2024 14:35:59 +0900

안녕하세요, 윌입니다.

undefined, null, NaN에 대해 정리해봅니다.

자바스크립트에서 undefined, null, NaN는 각각 고유한 의미와 용도를 가진 특수한 값입니다. 이 값들은 각각의 상황에서 다르게 동작하며, 그 차이점을 이해하는 것이 중요합니다.

1. undefined

undefined는 선언되었지만 값이 할당되지 않은 변수에 자동으로 할당되는 값입니다. 또한, 함수가 명시적으로 값을 반환하지 않을 때도 undefined가 반환됩니다.

특징

선언은 되었지만 초기화되지 않은 변수의 기본 값:

let a;
console.log(a); // undefined

객체의 존재하지 않는 프로퍼티에 접근할 때:

let obj = {};
console.log(obj.property); // undefined

함수가 값을 반환하지 않을 때:

function doNothing() {}
console.log(doNothing()); // undefined

2. null

null은 의도적으로 변수에 '없음' 또는 '빈 값'을 할당할 때 사용합니다. 이는 값이 없음을 명시적으로 나타내기 위해 사용됩니다.

* 의도적으로 빈 값을 할당했다는 점에서 undefined와는 확연히 다른 용도로 사용됩니다!

특징

의도적으로 빈 값을 할당:

let a = null;
console.log(a); // null

객체의 프로퍼티가 의도적으로 빈 값을 가질 때:

let obj = { property: null };
console.log(obj.property); // null

typeof null은 "object"를 반환하는 특이한 점:

console.log(typeof null); // "object"

3. NaN (Not-a-Number)

NaN는 숫자가 아닌 값을 숫자 연산으로 처리하려고 할 때 발생합니다. 이는 계산 결과가 유효한 숫자가 아님을 나타냅니다.

특징

숫자가 아닌 값을 숫자 연산에 사용:

console.log("abc" / 2); // NaN

NaN은 자기 자신과도 같지 않은 유일한 값:

console.log(NaN === NaN); // false

isNaN 함수를 사용하여 NaN을 확인:

console.log(isNaN(NaN)); // true
console.log(isNaN("abc")); // true

Number.isNaN 함수는 더 정확하게 NaN을 확인:

console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN("abc")); // false

비교 요약

undefined: 변수는 선언되었지만 아직 값이 할당되지 않았음을 의미.
null: 변수가 의도적으로 빈 값을 가짐을 의미.
NaN: 숫자가 아닌 값을 숫자 연산에 사용하여 유효하지 않은 숫자 결과가 나왔음을 의미.

이 값들은 자바스크립트에서 흔히 사용되며, 각 상황에 맞게 적절히 사용하여 코드를 명확하게 할 수 있습니다.

템플릿 리터럴(Template Literal)이란?

Will_ — Fri, 5 Jul 2024 20:04:10 +0900

안녕하세요, 윌입니다.

이번엔 템플릿 리터럴에 대한 정리를 해보려고 합니다.

템플릿 리터럴(Template Literal)은 ES6(ECMAScript 2015)에서 도입된 문자열 리터럴의 한 형태로,

백틱(backtick)(```)으로 감싸여 있으며, 보간(interpolation)과 여러 줄 문자열을 지원하는 것이 특징입니다.

템플릿 리터럴을 사용하면 가독성이 높고 유연한 문자열 처리가 가능합니다.

*참고 리터럴이란?

https://jsdnl123.tistory.com/31#google_vignette

리터럴(Literal)과 변수(Variable)의 차이는 무엇인가?

안녕하세요, 윌입니다. 개발 강의를 듣거나 관련 서적을 접하다보면 꼭 "리터럴"이라는 단어를 볼 수 있습니다. 이 단어는 꼭 "변수"와 비교하여 사용이 되는데요, 리터럴과 변수는 모두 프로

jsdnl123.tistory.com

템플릿 리터럴의 주요 특징

보간(Interpolation):
- 템플릿 리터럴은 ${} 문법을 사용하여 문자열 내에 변수나 표현식을 삽입할 수 있습니다.
- 예시
```
const name = "John";
const greeting = `Hello, ${name}!`;
console.log(greeting); // "Hello, John!"
```
여러 줄 문자열(Multiline Strings):
- 템플릿 리터럴은 여러 줄에 걸쳐 문자열을 작성할 수 있으며, 줄바꿈이 그대로 유지됩니다. (백틱 외 일반 따옴표는 적용되지 않음!!)
- 예시
```
const multiline = `This is a
multiline string.`;
console.log(multiline);
// 출력:
// This is a
// multiline string.
```
표현식 삽입(Expressions in Strings):
- 템플릿 리터럴은 단순 변수뿐만 아니라 복잡한 표현식도 삽입할 수 있습니다.
- 예시
```
const a = 5;
const b = 10;
const result = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(result); // "The sum of 5 and 10 is 15."
```

요약

템플릿 리터럴은 자바스크립트에서 문자열을 다루는 방법을 크게 향상시킵니다. 이를 통해 가독성 높은 코드 작성, 동적 문자열 생성, 여러 줄 문자열 작성 등이 가능해집니다. 특히 문자열 내에 변수나 표현식을 삽입하는 기능은 코드의 가독성과 유지 보수성을 크게 향상시킵니다.

리터럴(Literal)과 변수(Variable)의 차이는 무엇인가?

Will_ — Fri, 5 Jul 2024 19:38:17 +0900

안녕하세요, 윌입니다.

개발 강의를 듣거나 관련 서적을 접하다보면 꼭 "리터럴"이라는 단어를 볼 수 있습니다.

이 단어는 꼭 "변수"와 비교하여 사용이 되는데요,

리터럴과 변수는 모두 프로그래밍에서 값을 다루는 중요한 요소이지만, 둘 사이에는 분명한 차이가 있습니다.

아래에서 리터럴과 변수의 정의, 역할, 차이점을 설명하겠습니다.

리터럴(Literal)

정의: 리터럴은 소스 코드에서 직접 값을 나타내는 표현식입니다. 리터럴 자체가 값을 의미하며, 프로그램 실행 시 그 값이 변하지 않습니다.

42        // 숫자 리터럴
"Hello"   // 문자열 리터럴
true      // 불리언 리터럴
[1, 2, 3] // 배열 리터럴
{ name: "Alice", age: 30 } // 객체 리터럴

변수 (Variable)

정의: 변수는 값을 저장하고 참조할 수 있는 이름입니다. 변수에 저장된 값은 프로그램 실행 중 변경될 수 있습니다.

let age = 42;
let greeting = "Hello";
let isValid = true;
let numbers = [1, 2, 3];
let person = { name: "Alice", age: 30 };

위 코드에서 let age = 42;에서 age는 변수이고 42는 리터럴입니다.

주요 차이점

정의와 역할:
- 리터럴: 값 자체를 의미합니다. 예를 들어, 42는 숫자 리터럴로 숫자 42를 직접 나타냅니다.
- 변수: 값을 저장하는 공간을 의미하며, 이름을 통해 이 공간에 접근할 수 있습니다. 예를 들어, let age = 42;에서 age는 변수이고 42는 리터럴입니다.
값의 불변성:
- 리터럴: 값이 변하지 않습니다. 예를 들어, 42는 항상 42입니다.
- 변수: 변수에 저장된 값은 변경될 수 있습니다. 예를 들어, age에 다른 값을 할당할 수 있습니다.

let age = 42;
age = 43; // 변수 age의 값이 43으로 변경됨

3. 사용 용도:

리터럴: 직접 값을 표현할 때 사용합니다. 코드를 작성할 때 명시적으로 값을 지정하는 경우에 사용됩니다.

let name = "Alice"; // "Alice"는 리터럴

변수: 값을 저장하고 재사용할 때 사용합니다. 변수 이름을 통해 저장된 값을 참조하고, 필요에 따라 값을 변경할 수 있습니다.

let name = "Alice";
name = "Bob"; // 변수 name의 값이 "Bob"으로 변경됨

4. 메모리 사용:

리터럴: 프로그램이 실행될 때 고정된 메모리 위치에 저장됩니다.
변수: 메모리에 저장된 위치에 따라 참조되고, 그 위치의 값이 변경될 수 있습니다.

요약

리터럴: 소스 코드에서 직접 값을 나타내는 표현식. 예: 42, "Hello", [1, 2, 3].
변수: 값을 저장하고 참조하는 이름. 예: let age = 42;, let greeting = "Hello";.

리터럴은 값 자체를 표현하는 데 사용되고, 변수는 그 값을 저장하고 참조하는 데 사용됩니다. 변수를 통해 리터럴 값을 저장하고, 필요에 따라 값을 변경하거나 재사용할 수 있습니다.

[React] 컴포넌트란? 컴포넌트 핵심 개념 한방에 정리!

Will_ — Thu, 12 Oct 2023 23:00:22 +0900

안녕하세요, Will입니다.

오늘은 React의 컴포넌트에 대해 파헤치는 시간입니다.

컴포넌트가 무엇인지, 왜 중요한 지에 대해 이론적으로 접근해보고

그걸 가능하게 해주는 리액트의 기능은 무엇인지에 대해 알아보겠습니다.

다음 포스팅에선 실제 컴포넌트를 사용하는 방법에 대해 설명해보겠습니다.

컴포넌트란?

왜 리액트는 컴포넌트라는 핵심 개념 하나로 설명이 될까요?

그건 리액트로 개발하는 모든 것이 컴포넌트이기 때문이에요.

모든 것이 컴포넌트다

아래 TodoList 이미지를 봐주세요.

위 예제는 제가 React로 만들어본 TodoList 예제입니다.

포스트 잇이 붙어있는 학교 게시판을 모티브로 만들었어요.

맨 위에 제목이 있고, 아래엔 포스트 잇이 다닥다닥 붙어있는 모습이에요.

혹시 이미지에 표시한 빨간 박스가 보이시나요??

빨간 박스 친 부분은 하나의 포스트 잇을 나타내고, 비록 담겨있는 텍스트는 다르지만

이러한 포스트 잇이 동일한 모습으로 반복해서 화면에 표시되고 있죠??

일반적으로 위와같이 반복적으로 사용되는 부분을 컴포넌트로 만들게 됩니다.

저는 포스트잇 하나를 Post.jsx라는 컴포넌트로 만들었습니다.

Post.jsx. 위 이미지의 포스트 잇 하나를 나타내는 컴포넌트

저는 포스트잇을 하나의 컴포넌트로 개발하였으나

위 이미지의 게시판 전체를 하나의 컴포넌트로 만들 수도 있고,

작게는 버튼 하나, 문구 하나를 컴포넌트로 만들 수도 있습니다.

즉 모든 개발 단위를 컴포넌트로 만들 수 있고,

그래서 리액트에서 개발한 모든 것은 컴포넌트라고 할 수 있게 됩니다.

좀 더 자세히 살펴보겠습니다.

컴포넌트는 재사용 가능한 웹 프론트 덩어리이다

모든 컴포넌트는 재사용이 가능합니다.

재사용이 가능하면 코드를 더 작은 단위로 관리할 수 있게 됩니다.

프로그래밍에서는 작은 코드 단위로 재사용하는 것들이 기존에도 이미 존재하고 있었어요.

자바스크립트에서는 함수, 변수 등이 있습니다. 물론 그 외에도 어마어마하게 많습니다.

리액트는 이러한 함수, 변수 등의 재사용 개념을 웹 프론트에 적용시킨 겁니다.

그것도 아주 쉽게 사용할 수 있게 말이죠.

예시에서는 Post 컴포넌트라는 웹 덩어리를 재사용하고 있습니다.

웹 덩어리..? 갑자기 이상한 표현이 나왔는데요,

웹 덩어리를 표현해줄 다른 단어를 아래에서 더 살펴보도록 할게요.

컴포넌트는 사용자 지정 HTML이다

아까 예시로 들었던 코드를 다시 보겠습니다.

Post.jsx 컴포넌트

위 예제에서 Post 컴포넌트는 Post라는 하나의 함수(function)로 구성되어 있는데요,

(그래서 위와같이 개발된 컴포넌트를 함수형 컴포넌트라고도 합니다. 참고로 컴포넌트는 자바스크립트의 클래스를 사용해서도 개발이 가능하고 그러한 컴포넌트를 클래스형 컴포넌트라고 부르는데요, 요즘은 함수형 컴포넌트로 개발하는 것이 대부분이에요. ~~개발이 좀 더 쉽거든요.~~)

Post 함수의 Return 값을 보면 HTML과 비슷한 코드가 들어가 있죠? 이러한 코드를 JSX라고 합니다.

JSX는 Javascript 내부에 작성된 HTML로, 리액트 팀에서 고안한 리액트 개발 문법이에요.

위에서 언급한 '웹 덩어리'는 사실 JSX 덩어리인 것이죠.

JSX의 문법 등에 대해선 상세히 다룬 포스트가 있으니 참고해주시면 될 것 같고요,

2022.12.07 - [React] - [React] JSX란 대체 무엇인지? JSX 정의 및 문법 파헤치기

컴포넌트로 돌아와서,

결국 컴포넌트는 JSX라는 Javascript 코드에 포함된 HTML을 리턴하게 되므로,

컴포넌트는 사용자가 직접 만든 사용자 지정 HTML이라고 볼 수 있는 겁니다.

그래서 컴포넌트는 HTML 태그와 사용 방법이 비슷합니다.

아래에서 살펴보겠습니다.

컴포넌트를 가능하게 한 건 import, export이다.

예시를 통해 Post라는 컴포넌트를 보았는데요,

이러한 컴포넌트의 구체적인 사용방법에 대해 알아보겠습니다.

아래 코드는 기존에 보여드렸던 Post 컴포넌트와 Post 컴포넌트를 사용하고 있는 PostList 컴포넌트 입니다.

Post 컴포넌트. export로 Post 컴포넌트를 내보내고 있다

PostList 컴포넌트. import로 Post 컴포넌트를 가져와 마치 HTML 태그처럼 사용하고 있다.

Post 컴포넌트를 보면 export default Post 라는 코드를 통해 Post 컴포넌트를 내보냈고,

PostList에서 import Post from './Post'라는 코드를 통해 Post 컴포넌트를 가져와 사용하고 있습니다.

import로 가져온 컴포넌트는 HTML 태그와 같이 사용할 수 있습니다. <Post /> 와 같은 형태입니다.

예시의 코드는 Post 태그에 key, id 등의 속성 등이 추가로 적혀있는데요, 이러한 컴포넌트의 속성을 props라고 하는데, HTML과 같은 속성이 아니고 Post 컴포넌트로 전달하는 데이터 입니다. 이 포스팅에서는 다루지 않을 거에요.

이와 같이 리액트는 export, import를 사용하여 컴포넌트를 재사용할 수 있게 해줍니다.

예를 들어 A라는 파일의 기능을 B라는 파일에서 사용하기 위해선

A 파일의 기능을 export하고, B라는 파일에선 해당 기능을 import해야 합니다.

즉 Post.jsx라는 파일에서 Post라는 함수형 컴포넌트를 export하고,

PostList.jsx라는 파일에서는 Post 컴포넌트를 import하여 사용할 수 있게 되는 거죠.

export를 사용하는 방법은 내보내고자 하는 함수, 객체 코드 앞에 export를 붙이면 되구요,

import는 import 'import 대상(함수, 객체 등)' from 'File 경로'와 같이 사용하시면 됩니다.

그런데 이러한 import, export 코드는 브라우저에서 직접 사용하면 에러를 유발하게 돼요.

그렇지만 리액트 앱을 실행시켜보면 크롬, 엣지 등의 브라우저에서 정상 동작하게 되는데요,

그건 import, export를 자유로이 사용하게 해주는 리액트 배후의 무언가가 있기 때문입니다.

아래에서 무언가가 뭔지 살펴보겠습니다.

import, export를 가능하게 한 건 번들러다

리액트 프로젝트 설치 방법으로는 대표적으로 CRA(Create-React-App)이 있습니다.

CRA 시 설치되는 기능들 중 webpack이 있는데요,

이 webpack이 import, export를 자유로이 사용할 수 있게 해주는 '배후의 무언가'입니다.

Webpack이란

webpack은 번들러라는 것인데요, 오늘 우리가 파헤쳐본 컴포넌트는 사실 하나의 모듈이에요.

webpack은 이러한 모듈을 하나의 파일로 묶어주는 역할을 해요. (bundle.js)

이렇게 파일을 하나로 묶는 것을 '번들링'이라고 하고,

번들링을 수행하는 webpack과 같은 도구들을 '번들러'라고 합니다.

이 포스팅에선 webpack이 하나의 파일로 묶어주기에 import, export를 통해 컴포넌트를 각각의 파일에서 자유로이 사용할 수 있구나~ 하는 정도로 이해하시면 됩니다.

정리

이번 포스팅에서는 컴포넌트의 핵심 개념을 알아보았습니다.

리액트에서 컴포넌트는 정말 중요한 개념이니 꼭 기억해두도록 합시다.

아래는 요약입니다.

1. 리액트로 개발한 모든 것이 컴포넌트가 될 수 있다.

2. 컴포넌트는 재사용 가능한 웹 덩어리(JSX)이다.

3. 컴포넌트는 사용자 지정 HTML이다.

4. 컴포넌트는 import, export를 통해 각각의 파일에서 자유로이 사용할 수 있다.

5. 4를 가능하게 해준 것은 webpack과 같은 번들러가 파일을 하나로 묶어준 덕분이다.

긴 글 읽어주셔서 감사합니다.

Create React App(CRA) 파헤치기. CRA 사용법과 폴더구조 총정리!!

Will_ — Wed, 4 Oct 2023 09:00:32 +0900

Create-React-App 사용 방법 및 폴더 구조 정리

오늘은 Create-React-App 사용방법 및 생성된 React 앱 내 파일들은 어떤게 있는지, 역할은 무엇인지 한번 파헤쳐 보고자 한다.

평소 React 개발 시 Create React App을 통해 React 앱을 템플릿을 만들어 개발을 시작했다. 다들 마찬가지겠지만 아래 명령어를 이용하면 된다.

npx create-react-app my-app
cd my-app
npm start

위 명령어로 만들어진 my-app 폴더에 들어가보면 아래와 같은 폴더와 파일이 있다.

나는 이 중에 App.js, index.js 파일을 주로 개발했었고 그 외 다수 파일들은 삭제하곤 사용했다.

그러다 문득 적어도 '기본 파일들은 알고 사용하는게 맞지 않을까?' 하는 생각이 들어 이 글을 작성하게 되었다.

Create-React-App 사용 방법

Create-React-App이란?

React 공식 사이트에서 제공해주는 라이브러리로, React 앱 구성에 필요한 React 라이브러리와 Webpack, Babel 등의 라이브러리를 포함한 라이브러리이다. 여기서 Webpack과 Babel에 대해 살펴보면,

Webpack은 리액트 프로젝트에서 사용되는 여러 개의 자바스크립트 파일을 하나로 합쳐주는 모듈 번들러이다.

React는 어떤 파일에서든 다른 파일을 자유자재로 import하여 사용할 수 있는데, 그걸 가능하게 해주는 것이 Webpack이다.

Babel은 JSX로 작성된 코드를 JavaScript로 변환시켜준다. 여기서 JSX는 React에서 사용할 수 있는 문법으로, JavaScript와 HTML을 함께 사용하는 코드 작성 방법이다.

2022.12.07 - [React] - React - JSX란? JSX 문법 알아보기

Create-React-App(CRA) 명령어

위에서도 언급했지만 React 앱을 만들기 위해선 아래 명령어를 사용한다. 공식 홈페이지에서 안내해준 명령어이다.

npx create-react-app my-app
cd my-app
npm start

공식문서

위 공식 문서에서 상세한 내용을 확인할 수 있다.

여기서 npx는 항상 최신 버전의 라이브러리를 설치해주는 명령어이다. 그러나 만약 이전에 npm install -g create-react-app 명령어를 사용하여 글로벌로 Create React App을 설치한 경우, 이전 버전으로 설치될 수도 있다.

이럴 땐 npx가 항상 최신 버전을 사용하기 위해 아래 명령어를 통해 먼저 글로벌로 설치된 create-react-app을 삭제 후에 npx로 react 앱을 설치하길 바란다.

글로벌 설치된 create-react-app 삭제 명령어
npm uninstall -g create-react-app
yarn global remove create-react-app

create-react-app 폴더구조

create-react-app을 실행한 뒤 설치된 프로젝트 폴더의 구성은 다음과 같다.

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

출처: 공식문서

node_modules 폴더

node.js의 패키지를 구성하는 요소로 외부 node 모듈을 저장하는 폴더이다. react를 설치하면, react도 외부 모듈이므로 여기에 설치가 된다. 또한 react를 실행하기 위해 필요한 외부 모듈 또한 설치가 된다. 이러한 외부 모듈의 소스 코드가 모두 담겨져 있는 폴더이므로 매우 큰 용량을 갖는다. 따라서 github에 올려서는 안되는, .gitignore 파일에 반드시 명시해주어야 하는 폴더이다.

그럼 협업하는 팀원들은 node module 폴더가 없는데 어떻게 동일한 개발환경을 구성할 수 있을까?

> package.json 파일이 있기에 가능하다.

package.json 파일

package.json, package-lock.json 파일을 통해 어떤 패키지가 설치되어 있는지, 패키지의 버전은 무엇인지 확인할 수 있다. 이 파일은 협업하는 팀원들과의 패키지 버전, 사용 패키지 등을 통일시키는 중요한 역할을 하므로 신중하게 편집하고, 백업을 해두는 게 좋다.

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  ...

package.json 파일 예시

dependencies는 설치한 라이브러리의 이름과 버전 등을 확인할 수 있다. npm 또는 yarn을 통해 package를 설치하면 dependencies에 추가가 된다.

scripts는 커스텀 명령어를 만들어 둔 것이다. 예시에 있는 scripts 내 명령어들은 create-react-app 실행 시 생성되는 기본 명령어이고, 사용자가 얼마든지 추가하여 사용할 수 있다.

예를 들어 터미널에 npm start을 실행하면 npm react-scripts start를 실행한것과 같다.

public 폴더

public 폴더는 index.html과 기타 관련 파일로 구성되어 있다.

favicon.icon
사용자 아이콘. 웹 사이트의 아이콘.
index.html
react 앱 실행 시 보이는 html로, html 파일이 하나 밖에 없으므로 SPA가 됨.
logo192.png, logo512.png
웹 앱에서 사용하는 로고들.
manifest.json
웹 앱의 구성과 메타데이터를 정의하는 데 사용
robots.txt
검색 엔진이 웹사이트를 수집할 때 수집 할 것과 하지 말아야 할 것을 명시해주는 파일

src 폴더

src 폴더에는 아래와 같은 파일들이 있다. 실제 개발할 때 가장 많이 다루는 폴더이고, 아래 파일들 외 page, components, router, hook, react-query 등의 폴더를 만들어 구성하는 편이다.

*src는 소스 코드의 줄임말이다.

index.js
React 애플리케이션의 진입점. 웹 페이지 내 React 애플리케이션을 렌더링하는 역할 수행
App.js
주요 애플리케이션 컴포넌트. 웹 앱의 레이아웃 및 구조를 정의하며,
다른 컴포넌트를 렌더링하거나 라우팅을 설정하는 역할 수행
index.css 또는 App.css
애플리케이션의 스타일을 정의하고, 컴포넌트에 스타일을 적용하는 데 사용됨.
App.test.js
App.js 내 기능을 테스트 하기 위한 파일.

setupTest.js
테스팅 라이브러리를 import하는 파일
logo.svg
최초 화면에 앱에서 사용하고 있는 svg 파일
reportWebVitals.js
웹 앱의 여러가지 퍼포먼스를 분석해주는 도구. 개발 시 유용

이렇게 React 생성 도구인 create-react-app 라이브러리와 생성된 React 앱 폴더구조 및 파일 등을 확인해보았다.

매번 삭제하고 개발을 시작하느라 제대로 볼 시간이 없었던 파일들인데, 알게되어 매우 뿌듯하다.

다음엔 Vite(비트)를 이용하여 React 앱 생성 방법과 폴더구조 및 기타 특성 확인을 해봐야겠다.

프로그래머스 - 공원 산책 풀이(Python)

Will_ — Sun, 30 Apr 2023 19:20:05 +0900

안녕하세요, Will 입니다.

오늘은 프로그래머스 문제인 ''공원 산책" 문제 풀이를 가져왔습니다.

Map과 이동에 관련된 문제를 풀 때 접근하는 방법을 정리하고자 이 글을 작성합니다.

문제

지나다니는 길을 'O', 장애물을 'X'로 나타낸 직사각형 격자 모양의 공원에서 로봇 강아지가 산책을 하려합니다. 산책은 로봇 강아지에 미리 입력된 명령에 따라 진행하며, 명령은 다음과 같은 형식으로 주어집니다.

["방향 거리", "방향 거리" … ]
예를 들어 "E 5"는 로봇 강아지가 현재 위치에서 동쪽으로 5칸 이동했다는 의미입니다. 로봇 강아지는 명령을 수행하기 전에 다음 두 가지를 먼저 확인합니다.

주어진 방향으로 이동할 때 공원을 벗어나는지 확인합니다.
주어진 방향으로 이동 중 장애물을 만나는지 확인합니다.
위 두 가지중 어느 하나라도 해당된다면, 로봇 강아지는 해당 명령을 무시하고 다음 명령을 수행합니다.
공원의 가로 길이가 W, 세로 길이가 H라고 할 때, 공원의 좌측 상단의 좌표는 (0, 0), 우측 하단의 좌표는 (H - 1, W - 1) 입니다.

지도

공원을 나타내는 문자열 배열 park, 로봇 강아지가 수행할 명령이 담긴 문자열 배열 routes가 매개변수로 주어질 때, 로봇 강아지가 모든 명령을 수행 후 놓인 위치를 [세로 방향 좌표, 가로 방향 좌표] 순으로 배열에 담아 return 하도록 solution 함수를 완성해주세요.

제한사항
3 ≤ park의 길이 ≤ 50
3 ≤ park[i]의 길이 ≤ 50
park[i]는 다음 문자들로 이루어져 있으며 시작지점은 하나만 주어집니다.
S : 시작 지점
O : 이동 가능한 통로
X : 장애물
park는 직사각형 모양입니다.
1 ≤ routes의 길이 ≤ 50
routes의 각 원소는 로봇 강아지가 수행할 명령어를 나타냅니다.
로봇 강아지는 routes의 첫 번째 원소부터 순서대로 명령을 수행합니다.
routes의 원소는 "op n"과 같은 구조로 이루어져 있으며, op는 이동할 방향, n은 이동할 칸의 수를 의미합니다.
op는 다음 네 가지중 하나로 이루어져 있습니다.
N : 북쪽으로 주어진 칸만큼 이동합니다.
S : 남쪽으로 주어진 칸만큼 이동합니다.
W : 서쪽으로 주어진 칸만큼 이동합니다.
E : 동쪽으로 주어진 칸만큼 이동합니다.
1 ≤ n ≤ 9

입출력 예시

park	routes	result
["SOO","OOO","OOO"]	["E 2","S 2","W 1"]	[2,1]
["SOO","OXX","OOO"]	["E 2","S 2","W 1"]	[0,1]

입출력 예 #1

입력된 명령대로 동쪽으로 2칸, 남쪽으로 2칸, 서쪽으로 1칸 이동하면 [0,0] -> [0,2] -> [2,2] -> [2,1]이 됩니다.

입출력 예 #2

입력된 명령대로라면 동쪽으로 2칸, 남쪽으로 2칸, 서쪽으로 1칸 이동해야하지만 남쪽으로 2칸 이동할 때 장애물이 있는 칸을 지나기 때문에 해당 명령을 제외한 명령들만 따릅니다. 결과적으로는 [0,0] -> [0,2] -> [0,1]이 됩니다.

풀이

풀고보니 이 문제는 3가지 과정으로 나뉜다.

1. 초기 위치 찾기

2. 검색하기

3. 이동 시키기

1. 초기 위치 찾기

초기 위치는 주어진 park 내부에 존재하는 'S'의 위치를 찾는 것이다.

1
2
3
4
5
6
7
8
9
10

def solution(park, routes):
    C,R,r,c = len(park),len(park[0]),0,0
    move = {'E':(0,1),'W':(0,-1),"S":(1,0),'N':(-1,0)}
    print('C: {} R: {}'.format(C,R))
    for i_index,i in enumerate(park):
        for j_index,j in enumerate(i):
            if j == 'S':
                r=j_index
                c=i_index
    print('첫 포지션: {},{}'.format(c,r))

cs

 

c는 column, r은 row를 의미한다. move는 추후 검색 시 사용하기 위해 만들어둔 dic이니 지금은 신경쓰지 않아도 된다.

C, R(대문자)는 최대 길이 검색 시 활용하기 위해 만들어 두었다.

line 5: 먼저 park list 내의 문자열 값을 차례로 가져오고

line 6: 해당 문자열 내의 문자를 차례로 가져와서

line 7~9: 해당 값이 'S'이면, 초기 위치로 정한다.

*참고) 문제를 보면 (h,w) 좌표로 표시가 되므로, x,y 좌표로 표현하면 (y,x)가 된다.

2. 검색하기, 3. 이동 시키기

초기 위치를 찾았으니 이제 이동을 시켜보자.

그런데 이동할 수 있는지 먼저 확인(검색)을 해보아야 한다.

문제의 조건은

이동 후 도착 지점이 (1) 최대 길이를 넘지 않으며, // 지도 밖으로는 이동 할 수 없다.

이동 과정 내에 (2) 'X' 지점이 없어야 한다. // 장애물이 있으면 이동 할 수 없다.

>>조건에 부합하지 않으면 해당 명령은 무시한다.

아래 코드를 보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

    for route in routes:
        print('이동 전 포지션: {},{}'.format(c,r))
        new_r, new_c = r,c
        dc,dr=move[route[0]]
        print('dc,dc: {},{}'.format(dc,dr))
        for i in range(int(route[2])):
            if 0 <= new_r+dr < R and 0 <= new_c+dc < C and park[new_c+dc][new_r+dr] != 'X':
                print('조건 통과')
                new_r += dr
                new_c += dc
            else:
                print('조건 통과 못함')
                new_r,new_c = r,c
                break
        r=new_r
        c=new_c
Colored by Color Scripter

cs

line1: 먼저 routes는 'E 2'와 같은 방향, 이동거리가 담긴 list이다.

routes에 담긴 route 수 만큼 '이동'이 수행되므로 for문을 사용하여 route를 가져왔다.

line 3: new_r, new_c는 도착 지점의 위치를 나타내기 위해 만든 변수이다.

line 4: dc, dr은 이동할 양을 의미한다. 위에서 만든 move dictionary가 여기서 사용된다.

route[0]은 'E', 'S' 등의 방향을 의미하는 문자열이다.

ex) 'E'의 경우 dc:0, dr:1

line 6~7: 검색을 진행한다. 검색은 1칸 씩 이동 될 때마다 진행되게 하였다.

(1) 0 <= new_r+dr < R and 0 <= new_c+dc

new_r+dr은 row 상으로 이동 된 위치이다. 1칸 이동 된 위치가 지도 밖인지 확인한다.

0보다 작으면 지도 왼쪽 밖으로, R과 같으면 오른쪽 밖으로 이동된 것이다.

(2) park[new_c+dc][new_r+dr] != 'X'

park[new_c+dc][new_r+dr]는 이동된 위치의 park 값이다. 해당 값이 'X'이면 장애물이 되므로

X가 아닐 경우에만 이동하도록 하였다.

line 9~14: 조건에 부합할 경우 이동을 시키고, 한번이라도 조건에 맞지 않으면 기존 위치로 초기화한다.

line 15~16: 이동 완료된 위치를 기본 위치로 변경한다.

느낀 점

알고리즘 공부를 하며 기본적인 Map 문제에도 턱턱 막히는 걸 보니.. 아직 멀었다고 느껴진다.

그래도 프로그래머스 문제를 차근차근 풀며 실력이 늘어감을 느낀다.

지도 문제는 Map이 list로 주어지고, 주어지지 않으면 list로 만들어 보자.

검색은 지도 크기, 장애물 등의 조건이 빠지지 않도록 신경써서 코드를 짜도록 하자.

프로그래머스 - 달리기 경주 풀이(Python)

Will_ — Sat, 29 Apr 2023 20:23:58 +0900

안녕하세요, Will 입니다.

오늘은 프로그래머스 연습문제 중 '달리기 경주' 문제 풀이를 가지고 왔습니다.

난도가 높은 문제로 보이지 않았는데 막상 풀어보니 시간초과가 발생하여 애를 좀 먹었습니다.

시간복잡도와 Big-O 표기법과도 연관이 있는 문제이며,

개념을 정리해두기 위해 블로그에 남기게 되었습니다.

결론부터 말씀드리면 검색 시에 Dictionary를 활용하면 for문, list의 index() 함수를 이용할 때보다

시간복잡도를 낮출 수 있으며, 검색 시간을 대폭 감소 시킬 수 있습니다.

문제

얀에서는 매년 달리기 경주가 열립니다. 해설진들은 선수들이 자기 바로 앞의 선수를 추월할 때 추월한 선수의 이름을 부릅니다. 예를 들어 1등부터 3등까지 "mumu", "soe", "poe" 선수들이 순서대로 달리고 있을 때, 해설진이 "soe"선수를 불렀다면 2등인 "soe" 선수가 1등인 "mumu" 선수를 추월했다는 것입니다. 즉 "soe" 선수가 1등, "mumu" 선수가 2등으로 바뀝니다.

선수들의 이름이 1등부터 현재 등수 순서대로 담긴 문자열 배열 players와 해설진이 부른 이름을 담은 문자열 배열 callings가 매개변수로 주어질 때, 경주가 끝났을 때 선수들의 이름을 1등부터 등수 순서대로 배열에 담아 return 하는 solution 함수를 완성해주세요.

players: ["mumu", "soe", "poe", "kai", "mine"]
callings: ["kai", "kai", "mine", "mine"]

result: ["mumu", "kai", "mine", "soe", "poe"]

입출력 예 설명

4등인 "kai" 선수가 2번 추월하여 2등이 되고 앞서 3등, 2등인 "poe", "soe" 선수는 4등, 3등이 됩니다. 5등인 "mine" 선수가 2번 추월하여 4등, 3등인 "poe", "soe" 선수가 5등, 4등이 되고 경주가 끝납니다. 1등부터 배열에 담으면 ["mumu", "kai", "mine", "soe", "poe"]이 됩니다.

풀이

문제 자체는 어렵지 않다.

callings에 나온 이름의 선수가 바로 앞 선수를 제쳤다는 것이며,

players 내 선수의 위치를 등수에 맞게 고쳐주면 된다.

코딩 관점으론

calling list에서 값(이름)을 차례로 가져와서 players 내에 동일한 이름의 player를 찾고,

해당 player를 바로 앞 player와 교환해주면 될 것 같았다.

for문 및 List.index()를 이용하여 검색 하였을 때

문제는 list로 문제를 풀었을 때, 검색 시간이 오래 걸려 Test에 실패하였다.

시간 초과로 Test에 실패한 모습

처음 문제를 풀 때 아래와 같은 코드로 시도하였다.

1
2
3
4
5

def solution(players, callings):
    for x in callings:
        index = players.index(x)
        players[index], players[index-1] = players[index-1], players[index]
    return players
Colored by Color Scripter

cs

위 코드는 for 문을 통해 callings의 값을 가져와(x)

List의 index 함수를 이용하여 x와 같은 값이 players 내부에 있는지 확인한다. // index = players.index(x)

그런데 x와 같은 값이 players 초반 부에 있을 수도 있으나 마지막에 있을 수도 있으며

따라서 최대 players의 length 만큼 검색을 수행한다.

따라서 callings의 length를 M, players의 length를 N으로 한다면

검색에 필요한 시간복잡도는 O(NM)이 된다.

혹시 Big-O 표기법, 시간복잡도에 대해 처음 보신 분은 아래 사이트를 통해 확인해주시길 바랍니다.

정리가 아주 잘 되어 있습니다.

https://blog.naver.com/kks227/220769859177

빅오 표기법(Big-O notation), 시간복잡도, 공간복잡도

자료구조나 알고리즘에서 성능 측정의 가장 중요한 지표인 개념을 먼저 소개해드려야 할 것 같습니다. 그건...

blog.naver.com

따라서 검색 시간이 오래 걸린 것이고, 시간 초과로 테스트에 통과하지 못한 것이다.

출제 의도에 이중 for문, for문 내 index() 사용 등과 같은 O(NM)은 통과하지 못하도록

테스트 케이스를 만들어 둔 것으로 보였다.

Dictionary를 활용하여 검색 시간 줄이기

자 이제 아래 코드를 보자.

아래 코드는 dictionary를 이용하여 검색할 수 있도록 구성하였다.

1
2
3
4
5
6
7
8
9
10
11
12
13

def solution(players, callings):
    
    hashmap = dict()
    for i,v in enumerate(players):
        hashmap[v] = i
    for name in callings:
        front, back = hashmap[name]-1, hashmap[name]
        #hashmap 내 순서 변경
        hashmap[players[front]], hashmap[players[back]] = back, front
        #list 내 순서 변경
        players[front], players[back] = players[back], players[front]
    
    return players
Colored by Color Scripter

cs

먼저 hashmap이라는 dictionary를 만들고, 해당 dic에 players의 player와 index를 Key, Value 형태로 담아두었다.

따라서 callings에서 가져온 name으로 player를 찾을 때 players 전체를 검색하지 않아도 되어,

1중 for문 만으로 코드가 완성되었다.

즉 O(NM) -> O(N) 형태로 차수를 낮추게 되어, 검색 시간을 대폭 줄일 수 있었다.

느낀 점

알고리즘 문제를 처음 풀 때는 Big-O니, 시간복잡도니 전혀 신경을 쓰지 않았다.

그런데 위 사항을 고려하지 않으면 절대 풀리지 않는 문제가 슬슬 나오고 있어 한번 정리할 필요를 느꼈다.

이번에 블로그에 정리하며 개념이 어느정도 잡힌 느낌이 든다.

[React] JSX란 대체 무엇인지? JSX 정의 및 문법 파헤치기

Will_ — Wed, 7 Dec 2022 23:20:45 +0900

안녕하세요, Will 입니다.

오늘은 JSX가 무엇인지, 어떻게 사용하는지에 대해 작성해 보도록 하겠습니다.

JSX란?

JSX는 Javascript의 확장 문법으로 Javascript XML의 줄임말이에요.

React 팀에서 직접 고안한 문법이구요, React 개발을 위해

Javascript와 HTML을 섞어서 사용하는 문법입니다.

JSX는 사용자 인터페이스 개발을 쉽고, 편하게 가능하게 해줍니다.

쉽게 얘기해서 사용자 지정 HTML이라고도 할 수 있겠습니다.

코드를 보시면 좀 더 이해가 쉬우실 거에요.

아래 코드는 CRA로 처음 프로젝트를 생성했을 때 코드입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

import logo from './logo.svg';
import './App.css';
 
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
 
export default App;
Colored by Color Scripter

cs

 

처음 2줄

1
2
3
4

import logo from './logo.svg';
import './App.css';
 

cs

import 구문이 사용되었습니다. 이 부분은 React의 매우 중요한 개념이므로 설명을 해볼게요.

import는 특정 file을 불러오는 것이며 리액트 프로젝트의 js 파일에서 export를 통해 객체, 함수 또는 컴포넌트를 내보내면, 다른 파일에서 해당 객체나 함수, 컴포넌트를 import로 불러와 사용할 수 있습니다.

표준 자바스크립트에서는 에러가 발생되지만, 리액트에서는 에러가 발생하지 않습니다.

그 이유는 리액트 프로젝트 내 속해있는 '번들러' 덕분입니다. 파일을 묶듯 연결하는 것이죠.

대표적인 번들러로 웹팩(Webpack)이 있습니다.

번들러를 사용하면 import로 모듈을 불러오는 코드를 작성하였을 때, 불러온 모듈을 합쳐 하나의 파일을 생성해 줍니다.

웹팩을 사용하면 SVG, CSS 파일도 불러올 수 있습니다. 이건 웹팩의 로더(loader)라는 기능 덕분에 가능합니다.

ex) css-loader는 CSS 파일을 불러올 수 있게 해줍니다.

babel-loader는 js 파일을 불러오면서 최신 문법의 js 코드를 ES5 문법으로 변환해 줍니다.

이번에는 import 하단의 코드를 분석해보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
export default App; 
Colored by Color Scripter

cs

이 코드는 App이라는 컴포넌트를 만들어 주는 코드입니다. function 키워드를 사용하여 함수 컴포넌트라고 합니다.

function App을 들여다 보면 return 코드가 있고, return 코드 내부를 보면 HTML 처럼 보이는 것들이 있습니다. 이런 코드를 JSX라고 부릅니다.

자바스크립트 내에 HTML을 작성하였죠?(함수 안에HTML을 작성)

이렇게 작성하여도 브라우저에서 정상 동작을 하게 되는데요,

그건 리액트 배후에 있는 Babel이라는 Javascript 컴파일러 덕분이에요.

JSX를 표준 Javascript로 변환시켜 준다고 생각하시면 됩니다.

자 그럼 구체적인 문법을 한번 알아보겠습니다.

JSX 문법

1. 감싸기

JSX는 여러 요소가 있으면 반드시 부모 요소 하나로 감싸야 합니다. (이유는 아래에!)

1
2
3
4
5
6

function App() {
  return (
        <h1>{name} 리액트 안녕!</h1>
         <h2>정상 동작하니</h2>
  );
}

cs

h1 태그와 h2 태그가 동일 선상에 있는데 이 둘을 감싸주는 태그가 없습니다.

위 코드는 에러가 발생합니다. 이는 부모 요소 하나에 의해 감싸져 있지 않기 때문이에요.

다음과 같이 코드를 작성해야 합니다.

1
2
3
4
5
6
7
8

function App() {
  return (
      <div>
        <h1>{name} 리액트 안녕!</h1>
         <h2>정상 동작하니</h2>
    </div>
  );
}

cs

div 태그로 감싸준 모습. div를 사용하지 않고, <> </>로 이름없는 태그를 써도 됩니다.

왜 여러 개의 요소를 하나의 요소로 감싸야 할까요?

그건 리액트의 특징인 Virtual DOM 때문인데요,

Virtual DOM은 컴포넌트 변화를 효율적으로 비교할 수 있도록 React 팀에서 고안한 개념으로

Virtual DOM 동작을 위해선 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙을 가지고 있습니다.

fuction App의 Return 값은 결국 JavaScript Object 1개로 변환이 되는데,

그러기 위해선 반드시 최상위 태그도 1개여야 합니다.

2. 자바스크립트 표현

JSX 안에서도 자바스크립트 표현을 쓸 수 있습니다. JSX 내부에서 코드를 { }로 감싸면 됩니다.

위 코드에서는 name을 중괄호로 감쌌는데요, 여기서 name은 HTML의 텍스트가 아닌 Javascript 변수가 됩니다.

name 값이 Will이라면 브라우저 상에 Will로 표기가 되는 것이죠.

3. if문 대신 조건부 연산자(삼항 연산자)

JSX 내부 표현식에서 if 문을 사용할 수 없습니다.

조건에 따른 분기가 필요할 때는 JSX 밖에서 if문을 사용하여 값을 설정하거나,

조건부 연산자(삼항 연산자)를 사용하면 됩니다.

물론 && 및 || 연산자도 사용 가능합니다.

4. 인라인 스타일링

리액트에서 DOM 요소에 스타일링을 적용할 땐 객체 형태로 넣어주어야 합니다.

그리고 background-color와 같이 -문자가 포함되는 이름은 -를 없애고 카멜 표기법으로 작성해야됩니다.

background-color => backgroundColor

1
2
3
4
5
6
7
8
9
10
11
12
13

function App() {
  const name = '리액트';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: '48px', //font-size > fontSize
    fontWeight: 'bold', //font-weight > fontWeight
    padding: 16,
  }
  return <div style={style}>{name}</div>;
}
 
export default App;
Colored by Color Scripter

cs

위 예제에서도 font-size > fontSize, font-weight > fontWeight로 작성된 것을 알 수 있습니다.

5. class 대신 className

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function App() {
 
  const name='리액트';
  return <div className="react">{name}</div>;
}
 
export default App;
 
참고 App.css
 
.react {
  background: 'black';
  color: 'aqua';
  font-size: '48px'; 
  font-weight: 'bold';
  padding: 16;
}
Colored by Color Scripter

cs

위와 같이 CSS 적용을 위해 className을 써야 합니다.

근데 class를 써도 CSS 적용이 되긴합니다. 그러나 경고가 발생되므로 calssName을 써주도록 합시다.

*리액트 v16 이상부터 class를 className으로 변경 해주고 경고를 띄웁니다.

오늘은 JSX의 개념과 문법에 대해 정리해 보았습니다.

이 글을 보신 분들 모두 멋진 React 개발자가 되시길 기원합니다.