[React] 자바스크립트 복습 1

공부/React

[React] 자바스크립트 복습 1

hyunh404 2024. 1. 9. 16:58

728x90

자바스크립트

리액트를 본격적으로 공부하기에 앞서 기본이 되는 자바스크립트를 먼저 복습해주었다.

html이 실행될 때 자바스크립트 파일이 같이 로드되도록 head 부분에 script태그를 추가해주었다.

또한 defer속성을 추가해 나머지 html 문서를 읽어와 파싱한 후에 스크립트가 import되고 실행되도록 만들어 주었다.

이렇게 하면 스크립트코드가 다른 html 요소를 사용해야할 때 자바스크립트가 실행되기 시작하면 html 요소가 이미 로드되어 있도록 해준다.

만약 defer요소가 없으면, 순서없는 리스트를 사용하려 했을 때 스크립트가 리스트보다 먼저 로드되어 리스트가 준비되지 않았을 수 있다.

이외에도 script 태그에 추가할 수 있는 속성으로 type 속성이 있다.

type속성을 이용해 module로 설정을 해주면 자바스크립트 파일을 자바스크립트 모듈로 취급한다.

모듈로 취급하게 되면 중요한 import/export 문법을 사용할 수 있다. 이는 A 스크립트의 코드를 B 스크립트에 import 할 수 있도록 해준다. A 스크립트에서는 export 를 이용해 특정 기능을 B 스크립트로 import할 수 있다.

그러나,

리액트 프로젝트를 작업할 때 html 파일에 직접 script 태그를 추가할 일은 거의 없다. 리액트는 대부분 빌드 프로세스를 사용하며 그 과정에서 html코드에 자동으로 script 태그를 추가하기 때문이다.

예를들어

다음의 리액트 html 코드에는 script 태그가 없지만 페이지는 정상적으로 작동하고 있음을 확인할 수 있다.

<!DOCTYPE html>

<head>

<meta

name="viewport"

content="width=device-width, initial-scale=1, shrink-to-fit=no"

<!--

manifest.json provides metadata used when your web app is added to the

homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

-->

<!--

Notice the use of %PUBLIC_URL% in the tags above.

It will be replaced with the URL of the `public` folder during the build.

Only files inside the `public` folder can be referenced from the HTML.

Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will

work correctly both with client-side routing and a non-root public URL.

Learn how to configure a non-root public URL by running `npm run build`.

-->

<title>React App</title>

</head>

<body>

<!--

This HTML file is a template.

If you open it directly in the browser, you will see an empty page.

You can add webfonts, meta tags, or analytics to this file.

The build step will place the bundled scripts into the <body> tag.

To begin the development, run `npm start` or `yarn start`.

To create a production bundle, use `npm run build` or `yarn build`.

-->

</body>

</html>

이유는 무엇일까?

빌드 프로세스

위에서 언급한대로 리액트 프로젝트는 빌드 프로세스를 사용한다.

즉, 작성한 코드 그래도 브라우저에서 실행되는 것이 아니라는 의미이다.

대신 브라우저에 전달되기 전 내부적으로 코드가 수정된다.

json 파일에서 실제 툴을 확인할 수 있고, 프로젝트에서 사용하는 모든 의존성, 모든 라이브러리의 목록이 들어있다.

당연히 리액트 라이브러리를 구성하는 패키지들이 있으며 추가로 react-scripts 라이브러리도 존재한다. 이는 브라우저에서 실행되거나 브라우저에서 실행되는 리액트가 사용하는 것이 아니라 브라우저에 전달되기 전 뒤에서 코드를 변환하는 다양한 툴을 제공한다.

정확히 말하면 전달될 html파일에 script 태그를 추가한다.

따라서 페이지 검사를 통해 개발자도구를 확인해보면 script 코드가 아래의 사진처럼 추가되어 있는 것을 확인할 수 있다.

백그라운드에 있는 빌드 프로세스가 script 요소를 생성하고 자동으로 html 파일에 추가한 것이다.

개발서버가 뒤에서 소스코드를 확인하고 변환하여 html 파일을 수정해 script 요소를 추가한 후 변환된 소스코드를 로드한다. 따라서 웹페이지에서는 변환된 소스코드가 실행되게 된다.

왜 빌드 프로세스를 사용하여 소스코드를 변환할까?

1. 리액트 코드는 특별한 JSX 기능을 사용하기 때문에 처리되지 않은 리액트 코드는 브라우저에서 실행할 수 없기 때문이다.

JSX 코드는 자바스크립트 파일에 작성된 html코드이다. 이는 기본적으로 기본 자바스크립트 코드가 아니므로 작동하지 않는다.

예를들어

일반적인 자바스크립트 프로젝트에 html코드인 <div>Hello</div>; 라는 코드를 작성한다면 웹페이지에서 오류가 발생하는 것을 볼 수 있다.

추가한 코드

<div>Hello</div>;

따라서 표준 자바스크립트 코드가 아닌 문법을 활성화해야하며 이는 리액트 앱에서 매우 중요하다.

파일에 html 같은 코드를 넣는 것이기 때문이다.

따라서 자바스크립트가 이해할 수 있도록 변환해야 브라우저에서 코드 실행이 가능해진다.

이것이 빌드 프로세스를 사용하는 이유 중 하나이다.

2. 작성한 코드가 실행을 위해 최적화되지 않았기 때문이다.

예를들어,

충분히 사용자에게 전달할 수 있을 만큼 충분히 변수나 함수 이름이 짧게 변형되지 않았음을 의미한다. 즉, 간소화되지 않았다.

웹사이트 방문자가 다운로드해야 하는 코드의 양을 최대한 줄일 수 있도록 최적화된 코드를 만들어 주어야하기 때문에 빌드 프로세스가 리액트 프로젝트에 필요한 이유이다.

import / export

자바스크립트에서는 let 키워드를 사용하여 변수를 생성한다.

js 파일에 암호 api key 문자열을 저장해 백엔드에 http 요청을 전달하는 데 사용하는 변수를 지정해준다.

let apikey = "adnasdoasflak1";

이 api key 값을 다른 파일에서도 사용할 수 있어야 한다.

따라서 export 를 이용해 이 변수를 다른 파일에서도 사용 가능하도록 만들어 준다.

export let apikey = "adnasdoasflak1";

이제 이 변수를 사용할 파일에서 import 를 사용하고 변수의 이름을 대소문자를 구분해 작성해준다.

또한 어느 파일에서 import 를 하는지 상대경로를 작성해야한다.

예를들어,

util.js 파일에 있는 api key를 사용하려 하면 아래의 코드와 같이 작성해주면 된다. 작업 중인 파일과 같은 폴더에 util.js 파일이 존재하기 때문에 상대경로를 ./로 시작해주었다.

import { apikey } from "./util.js";

또한 자바스크립트만 사용한다면 확장자를 입력해야한다.

그러나 리액트 프로젝트를 작업할 떄는 확장자는 생략해도 된다.

이것도 마찬가지로 빌드프로세스가 확장자를 추가하기 때문이다.

export 와 import를 정의해주고 나면 파일에 apikey값이 없더라도 import를 통해 다른 파일에 정의된 그 값을 사용할 수 있다.

예를들어,

import한 파일에 apikey 값을 콘솔창에 표시할 수 있다.

console.log(apikey);

가장 중요한 점은 자바스크립트에서 import / export 를 사용하기 위해서는 type="module" 속성을 사용해야 한다는 점이다.

그러나 리액트에서는 자바스크립트에 type속성이 없는 것을 확인할 수 있는데 이는 빌드 프로세스에서 import / export 가 있는 모든 개별 파일을 하나로 합쳐 import 구문을 기존 문법 순서대로 처리하기 떄문이다.
이렇게 하면 import / export 를 지원하지 않는 브라우저에서도 코드를 실행할 수 있고 여러개의 작은 파일을 다운로드 하는 대신 큰 파일 몇개만 다운로드 하면 되므로 더 효율적이다.

728x90

import / export default

import / export 할 수 있는 또 다른 방법 중에 하나는 default를 사용하는 것이다.

default를 사용하면 변수를 생성하지 않고 값만을 export 한다.

예를 들어,

위와 동일하게 apikey값을 export하려 할때 그 값인 'adnasdoasflak1' 만을 이름도 부여하지 않고 export 하게 된다.

export default "adnasdoasflak1";

또한 default를 사용하면 export하는 'adnasdoasflak1'값이 기본값이 된다.

중요한 점은 파일별로 export default는 하나만 존재할 수 있다.

반면, 위의 import / export 를 사용하는 코드는 여러개의 값을 import / export 할 수 있다는 점이 차이점이다.

그러나 export default가 하나만 있다면 import / export 를 여러개 같이 사용하는 것은 가능하다.

export default "adnasdoasflak1";

export let apikey = "adnasdoasflak1";

export let abc = "abc";

또한 위와 같이 여러개의 export가 존재하는 경우에는 import 할 때 util.js가 제공하는 모든 대상을 하나의 객체에 결합할 수 있다. 예를들어 util이라고 이름을 할당하겠다.

import * as util from "./util.js";

이렇게 되면 콘솔창에 모든 export된 값들이 출력이 되게 된다.

console.log(util);

콘솔창에 출력된 값들 이다.

{abc: "abc", apikey: "adnasdoasflak1", default: "adnasdoasflak1"}

또는 할당한 객체명을 이용해 원하는 하나의 값만 출력하는 것도 가능하다. 객체명 뒤에 변수명을 작성하면 해당하는 값만 콘솔창에 출력되게 된다.

console.log(util.apikey);

다시 default를 사용한 export에서는 지정된 이름이 없으므로 import를 할 때 반드시 이름을 할당해야한다.

예를들어,

아래와 같이 코드를 작성해주면 된다.

import apikey from "./util.js";

이렇게 해주면 마찬가지로 apikey값을 import한 파일에서도 출력할 수 있게 된다.

이 문법은 하나의 파일에 하나의 컴포넌트, 즉 하나의 자바스크립트 함수만 존재하는 경우가 많을 때 사용하기 좋다.

만약 import 시에 할당된 이름이 마음에 들지 않는 다면 as 를 사용하여 원하는 별칭을 부여할 수도 있다.

이렇게 되면 콘솔창에 출력할 때 별칭을 사용하여 호출하면 된다.

import { abc as content } from "./util.js";

값 (변수, 상수)

자바스크립트에서 다룰 수 있는 값의 유형을 다양하다.

string, number, boolean, null, undefined 값과 특수한 객체 값이 있다.

자바스크립트에서는 필요한 곳에 값을 생성할 수 있다.

그러나

값을 저장해야할 때는 변수를 사용한다.

변수는 간단히 말하면 값을 저장하는 데이터 컨테이너이며, 원하는 이름을 할당할 수 있다.
코드 내에서 변수에 저장된 값을 사용해야 할때 이름을 식별자로 사용하면 된다.
일반적으로 변수를 사용하면 값을 재사용 할 수 있고, 코드 가독성이 좋아진다는 장점이 있다.
let을 사용한다. 연산자로 새 값을 할당할 수 있다.

변수의 이름을 지정할 때 공백이나 하이픈이 있어서는 안되며 밑줄은 사용가능하지만 일반적으로 자바스크립트에서 사용되지는 않는다.

상수는 변수와 마찬가지로 데이터 컨테이너이다.
그러나 상수에는 값을 다시 할당할 수 없다는 것이 차이점이다.
const를 사용한다.

또한 자바스크립트에는 다양한 연산자가 존재한다.

그 중 '===' 연산자는 두 피연산자가 일치하는지 확인하는 연산자이다.

따라서 일치하면 True, 일치하지 않으면 False를 반환하는 boolean연산자이다.

함수

함수인 function키워드는 바로 실행되는 것이 아닌 나중에 함수를 호출했을 때 실행되는 코드를 정의하는 것이다.

같은 함수를 여러번 호출해 실행할 수도 있다.

function 키워드 다음에 이름을 부여하고 매개변수 목록을 작성하는 것이 기본적인 구조이다.

예를들어, 함수에 greet이라는 이름을 부여하고 매개변수는 ()안에 쓰게 되는데 없어도 ()는 작성해주어야 하며, 실행될 함수 내용을 {}안에 작성하면된다.

현재 콘솔에 출력하도록 함수의 내용을 작성했지만 콘솔에는 아무것도 출력되지 않는다.

함수를 정의하긴 했지만 아직 실행하지는 않았기 때문이다.

function greet() {

console.log('Hello!');

}

함수를 호출해야 내용이 실행이 된다.

아래의 코드와 같이 함수를 호출해주면 이제 콘솔창에 Hello!라는 문구가 출력되게 된다.

greet();

또한 함수에서 매개변수를 받을 수도 있다.

예를들어,

userName, message를 받을 수 있으며 원하는만큼 매개변수를 받을 수 있다.

그러나 매개변수는 함수 내에서만 사용할 수 있다.

function greet(userName, message) {

console.log(userName);

console.log(message);

}

매개변수를 사용하려할 때는 아래와 같이 입력 매개변수의 값을 제공해야한다.

greet("Max", "Hello!");

greet("Manuel", "Hello, What's up?");

위와 같이 함수는 값을 받을 수도 있지만 값을 반환할 수도 있다.

예를들어,

userName과 message를 결합한 string을 반환할 수 있다.

그러나 함수를 호출할 때 콘솔에 아무것도 출력되지 않는다.

함수가 사용할 수 있는 값을 반환하므로 결과를 상수나 변수에 저장해주면 콘솔에 함수가 반환하는 값이 출력되는 것을 확인할 수 있다.

예를들어, 결과를 저장하기 위해 console.log를 사용해주었다.

function greet(userName, message) {

return "Hi, I am" + userName + ". " + message;

}

console.log(greet("Max", "Hello!"));

또는 message에 기본값을 설정해주거나, userName은 상수값에 저장한 다음 사용하면 코드가 더 깔끔해질 수 있다.

function greet(userName, message = "Hello!") {

return "Hi, I am" + userName + "." + message;

}

const greeting1 = greet("Max");

console.log(greeting1);

코딩 연습1

처음에는 함수가 반환하는 값을 갖는 것이 아닌 값을 받도록 코딩하였으나 테스트에 통과되지 않아 문제를 다시 읽었더니 결과를 반환하라고 되어 있어 반환하는 값으로 변경해주었다.

짧은 코딩이었기 때문에 어렵지 않게 통과할 수 있었다.

728x90

'공부 > React' 카테고리의 다른 글

[React] 연습 프로젝트 1 (0)	2024.01.17
[React] Fragments, Feature, 틱택토 게임 등 (0)	2024.01.16
[React] 컴포넌트, JSX, Prop(속성), 상태 등 (0)	2024.01.14
[React] 자바스크립트 복습 2 (0)	2024.01.10
[React] 시작하기 (0)	2024.01.09

현재글[React] 자바스크립트 복습 1