[React] 시작하기 (javaScript)

티스토리 뷰

Web/React

[React] 시작하기 (javaScript)

HAN_PY 2021. 8. 30. 00:00

0. 들어가면서

즐거운 마음으로 react관련 글을 적어보려한다. 가능하면 실습을 통해 따라하면서 자연스럽게 익힐 수 있도록 준비해 보려한다. 기본적으로 프런트엔드는 웹과 앱이 있는데 우선을 웹을 기준으로 작성을 시작해 보겠다. 리액트를 들어가기 전에 자바스크립트로 워밍업을 한다고 생각하면 된다.

들어가기 전에 간단히 개념만 잡고 가겠다. 기본적으로 WEB에서 우리가 눈에 보이는 각각을 element라고 한다. 그리고 DOM이란 브라우저(컴퓨터)가 이해하는 element의 원형이다. 즉, element를 논리적으로 말하면 DOM이라고 한다. 물론 한번에 이해 안될 것이다. 괜찮다. 먼가 화면에 보여지는것을 element라고 하기도 하고 DOM이라고 하기도 하는구나라고 생각하고 그냥 넘어가자.

우리는 바닐라 자바스크립트를 사용할 것이다. 바닐라 자바스크립트란 순수 자바스크립트라는 뜻으로 특정 라이브러리나 프레임워크를 사용하지 않는 그 자체의 자바스크립트라고 할 수 있다.

만약, 필수 기능만 익혀 빠르게 속성 web을 만들고 싶다면, 바로 아래를 눌러 시작하자.

VS code 필수

2021.10.25 - [Web/React] - [react web] 시작하기

1. react 시작

https://codesandbox.io/

CodeSandbox: Online Code Editor and IDE for Rapid Web Development

Optimized for frameworks Custom environments built specifically for React, Vue, Angular, and many more.

codesandbox.io

기본적인 실습은 위의 codesandbox에 들어가서 하면된다. html 기본과 react관련 된 것들도 쉽게 사용가능하다.

<!DOCTYPE html>
<html lang="en">
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

우선은 위의 Hello world를 javascript를 활용하여 출력하는 연습을 해보자.

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
    <script>
      const rootElement = document.getElementById("root");
      const element = document.createElement("h1");
      element.textContent = "Hello, world!";
      rootElement.appendChild(element);
    </script>
  </body>
</html>

우리는 html 없이 javascript로 위의 코드를 직접 그려본거다.

id가 root인 것을 선택해서 변수로 지정했다. (document.getElementById)
h1 태그를 만드는 코드를 element에 넣었다. (document.createElement)
h1 태크에 문자를 삽입했다. (element.textContent)
appendChild를 통해서 h1을 id가 root인 곳에 넣었다.

자바르크립트에서 dom을 만드는 방식을 확인해 봤다. 이제 react로 dom을 만드는 방법을 알아보자. react를 보통을 설치해서 react-creat-app같은 명령어를 치기도 하지만, 우선은 CDN(content Delivery Network) 방식으로 react를 시작해 보자. 아래의 링크를 참고해서 CDN은 2출을 추가하면 리액트를 사용할 수 있게 된다.

https://ko.reactjs.org/docs/cdn-links.html

CDN 링크 – React

A JavaScript library for building user interfaces

ko.reactjs.org

CDN을 추가하면 아래와 같이 변경된다.

<!DOCTYPE html>
<html lang="en">
  <body>
    <script
      crossorigin
      src="https://unpkg.com/react@17/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
    ></script>
    <div id="root"></div>
  </body>
</html>

이제 위에서 작성한 바닐라 자바스크립트를 리액트로 변경해 보자.

const element = document.createElement("h1");
element.textContent = "Hello, world!";

위의 두줄이 react에서는 아래의 한줄로 변경된다.

const element = React.createElement("h1", { children: "Hello, world!" });

rootElement.appendChild(element); 

위의 element를 rootElement에 넣는 로직이 아래의 한줄로 변경된다.

ReactDOM.render(element, rootElement);

위의 변경된 것들을 최종 반영하면 아래와 같이 된다.

<!DOCTYPE html>
<html lang="en">
  <body>
    <script
      crossorigin
      src="https://unpkg.com/react@17/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
    ></script>
    <div id="root"></div>
    <script>
      const rootElement = document.getElementById("root");
      const element = React.createElement("h1", { children: "Hello, world!" });
      ReactDOM.render(element, rootElement);
    </script>
  </body>
</html>

위의 element에 console.log를 활용해서 찍어보면 아래와 같이 출력된다.

공식문서를 참고해서 실험을 해보자.

element의 내부에 type부분에 "h1"이라는 태크 이름이 들어가는 것을 확인 할 수 있고, props의 내부인 children부분이 들어가는 것을 확인 할 수 있다. 그렇다면, children부분을 아래와 같이 임의로 abc라 변경해보자.

우린 children을 abc로 변경했다.

{ abc: "Hello" }

그 결과 화면에는 text가 출력 되진 않는다. 하지만, element 값에는 props안에 abc값이 들어있는 것을 확인 할 수 있다. 그 말은 children이라는 키값으로 넣어줘야지 text 주입이 되고 화면에 출력이 되는 것을 알 수 있다. 그렇다면 아래와 같이 테스트를 해보자

위의 결과를 보면 children을 활용하면 h1 태그 값 내부에 주입을 할 수 있는 것을 알 수 있다. 그리고 추가로 key value를 넣어주면 prop내부로 정보를 전해줄 수 있다는 것을 이해하자.

그러면 조금더 실습을 해보자.

<!DOCTYPE html>
<html lang="en">
  <body>
    <script
      crossorigin
      src="https://unpkg.com/react@17/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
    ></script>
    <div id="root"></div>
    <script>
      const rootElement = document.getElementById("root");
      const element = React.createElement(
        "h1",
        {
          abc: "Hello",
          children: "view text"
        },
        "here!!!!!!"
      );
      console.log(element);
      ReactDOM.render(element, rootElement);
    </script>
  </body>
</html>

위의 코드에서 createElement의 세번째 인자에 "here!!!!!!"을 추가했다. 결과는 아래에 보자

결과를 보면 children에 덮어써져서 화면에 세번째 인자가 들어오는 것을 확인 할 수 있다. 신기하다. 다른 인지를 더 추가해 보자.

결과값을 보면 인자를 처음 추가할 때는 children에 덮어지지만, 여러개를 추가하니 배열로 들어가서 화면에 표시됨을 이해해야한다.

인자들을 배열로 변경해도 같은 결과를 출력하는 것을 알 수 있다.

배열의 인자들을 children에 직접넣어도 출력이 되는 것을 알 수 있다. 그렇다면 이렇게 react를 이용하면 될까???

우리는 더 쉬운 방법을 위해 JSX를 사용한다.

이제 JSX를 배우러 가보자.

JSX 알아보기

아래의 내용은 헷갈렸던 javascript에 관한 내용을 생각날 때 마다 추가할 예정이다.

javascript

기본적으로 자바스크립트는 다 안다고 가정하고 주의할만한 것만 글을 적어보겠다. 필요 시 한번만 보고 넘어가면 좋다.

[TypeError]map is not a function 발생 시

기본적으로 test를 사용하려면, map은 배열만 사용가능하다. 따라서 배열이 아닌 객체를 넣게 되면 에러가 발생한다.

{} => .map 불가능

[] => .map 가능

json을 받아왔을 때 바로 map을 썼을 때 안된다면, 이러한 이유일 가능성이 높다. 따라서 {} 객체안의 []로 선택 후에 map을 사용하면 될 것이다. 만약 객체를 뽑고 싶다면, for ... in ...을 사용하면 된다.

for (key in object) {
	console.log(key, object[key])
}

위와 같은 방식으로 object의 key와 value값을 빼내서 사용 할 수 있다.

Error: Objects are not valid as a React child (found: object with keys {id})

props가 객체로 들어오는 경우에 발생가능하다. 이렇때는 props.table 과 같이 내부의 key값을 같이 적어주면 해결된다. 그러나 이것은 [] 배열에서 없는 인덱스를 지정하는 경우에도 발생한다. 주의하도록 하자.

Error: Objects are not valid as a React child (found: object with keys {current})

이러한 경우는 보통 useRef를 사용할 경우에 많이 사용한다. 따라서 useRef를 사용할 때는 .current를 뒤에 붙여줘야한다.

// 등록
const testRef = useRef("han")

// 변경
testRef.current = "py"

// html에서 사용
<div>
{testRef.current}
</div>

갯수구하기

array는 => array.length로 쉽게 구하기가 가능하다.

object는 length가 안된다. object의 갯수를 구하기 위해서는

Object.keys()를 이용해서 우선 object의 key를 array로 만든 후에 length를 뒤에다 붙이면 된다.

testObject라는 객체의 갯수를 구하려면,

Object.keys(testObject).length

로 구하면된다.

1. let, const, var

let

let은 블록범위의 지역변수를 선언하고 선택적으로 그 값을 초기화 시킨다.

let으로 선언된 변수는 변수가 선언된 블록 내에서만 유효하며, 하위 블록에서도 유효하다.

var은 블록 범위를 무시하고 전역 변수나 함수 지역 변수로 선언된다.

function varTest() {
	var x = 1;
    if (trun) {
    	var x = 2;
        console.log(x);   //2
    }
	console.log(x);    //2
}

function letTest() {
	let x = 1;
    if (true) {
    	let x = 2;
        console.log(x);    //2
    }
    console.log(x);    //1
}

프로그램이나 함수의 최상위에서는 let이 전역 객체의 속성 값을 생성하지 않는다.

var x = 'global';
let y = 'global';
console.log(this.x); // 'global' 전역객체의 속성 x를 생성
console.log(this.y); // undefined 전역 객체의 속성 y를 생성하지 않음

블록을 사용할 때, let은 변수의 유효범위를 블록으로 제한한다. var은 함수 내 또는 전역을 유효범위로 가진다.

var a = 1;
let b = 2;

if (a === 1) {
    var a = 11; // 전역 변수
    let b = 22; // if 블록 변수
    
    console.log(a); // 11
    console.log(b); // 22
}

console.log(a); // 11
console.log(b); // 2

const

- 블록 범위의 상수를 선언

- 상수의 값은 재할당할 수 없으며 다시 선언 할 수 도 없습니다.

const number = 42;
try {
	number = 99;
} catch (err) {
	console.log(err);
    // expected output: TypeError: invalid assignment to const 'number'
    // Note - error messages will vary depending on browser
}

console.log(number);
// expected output: 42

try catch 문법

시도할 블록을 try에 표시하고 예외가 발생하였을 시, catch에 하나 이상의 반응을 명시 합니다.

즉, 하나 이상의 문장을 포함한 try블록과, try 블록에서 예외가 발생하였을 때, 어떤 것을 할 것인지 명시된 문장을 포함한 0개 이상의 catch 블록으로 구성한다. 예외 발생이 없다면, catch는 건너 뛴다.

JavaScript classes.

1. 객체와는 다르게 클래스 메서드

정의 시 콤마를 넣을 필요가 없다

2. 다른 언어들과 다르게 클래스에서 호출 방법에 따라 메서드의 this값이 달라진다.

class선언

class Rectangle {
	constructor(height, width) {
    	this.height = height
        this.width = width
    }
}

함수의 선언과 클래스 선언의 차이는, 함수 선언의 경우 호이스팅이 일어나지만, 클래스 선언은 그렇지 않다는 점이다. 클래스를 사용하기 위해서는 반드시 클래스를 먼저 선언 한 후에 사용해야하며 그렇지 않은 경우에는 ReferenceError를 발생 시킨다.

class Rectangle {}

const p = new Rectangle();

static methods

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  static distance(a, b) {
    const dx = a.x - b.x;
    const dy = a.y - b.y;

    return Math.hypot(dx, dy);
  }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10);
p1.distance; //undefined
p2.distance; //undefined

console.log(Point.distance(p1, p2)); // 7.0710678118654755

arrow functions

x => x*2

위와 아래느 같은 말이다.

function(x) { return x * 2 }

반복문

for (let i = 0; i < 9; ++i) {
  console.log(i);
}
// 출력
0
1
2
3
4
5
6
7
8

// 조건문
true || alert('A');
false || alert('B');
// A는 실행되지 않고 B는 실행된다.
 
true && alert('C');
false && alert('D');
// C는 실행되고 D는 실행되지 않는다.

첫 번째 문장은 좌변이 참이므로 우변을 확인하지 않고 넘어갑니다. 두 번째 문장은 좌변이 거짓이므로 우변을 확인합니다. 이 과정에서 B 경고창이 발생합니다. 비슷한 맥락으로 세 번째와 네 번째 문장을 생각해 보면 왜 그런지 알 수 있다. 이를 활용하는 방법은 true, false 자리에 다른 조건문을 사용하는 것이

var array = ['포도', '사과', '바나나', '망고'];
 
for(var i in array) {
    alert(array[i]);
}

'Web > React' 카테고리의 다른 글

[react web] 시작하기 (0)	2021.11.01
[React] JSX 기초 개념 정리 (0)	2021.09.01
[React]이벤트 처리하기 (0)	2020.07.20
[React]State and Lifecycle (0)	2020.07.15
[React]Components와 props (0)	2020.07.15

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/05 »
일	월	화	수	목	금	토
			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
26	27	28	29	30	31

글 보관함

AI Platform / Web

티스토리 뷰