이것저것 공부한다:: 벨로퍼트와 함께하는 모던 리액트 입문 1장 1~10

1장 1::

1장 1번은, 리액트와 HTML로 이루어진 카운터 예시가 어떻게 다른지를 설명한다. HTML+JS의 경우 HTML에 이벤트를 부여하려면 HTML을 구성한 후 id를 사용하여 각 DOM을 선택한 뒤, 원하는 이벤트가 발생하면 DOM의 특정 속성을 바꿔주어야 한다고 한다. 그러나 이런 이벤트가 중첩될 경우, 처리해야 할 이벤트와 관리해야 할 상태값으로 내용이 점점 복잡해진다고 말하고 말이다.

이를 해결하기 위해 만들어진 것이 Ember, BackBone, AngularJS(*자바스크립트 기반의 오픈 소스 프론트엔드 웹 어플리케이션 프레임워크의 하나, 싱글 페이지 애플리케이션 개발 중에 마주치는 여러 문제들을 해결하기 위해 개발되었으며, 주로 구글과 여러 회사, 커뮤니티에 의해 유지 보수 되고 있다.)등의 프레임워크가 만들어졌다. 이들의 작동방식은 각각 다르지만, 간단하게 이야기하자면 ‘자바스크립트의 특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결하여 업데이트 하는 작업을 간소화하는 방식으로 웹 개발의 어려움을 해결하고자 하였다.

그러나 리액트는 조금 다르다. 상태가 바뀜에 따라 어떻게 업데이트할지 규칙을 정하는 게 아니라, 처음부터 모든 걸 보여주는 것을 아이디어로 개발했다고 한다.

React는 버추얼 DOM(가상 DOM)을 이용해 이 문제를 해결했다. 이러면 엊데이트를 어떻게 해야 할 지에 대한 고민을 하지 않아도 되어 더 유용해진다.

이 Virtual DOM은 메모리에 가상으로 존재하는 DOM으로써, 그냥 JS 객체이기 때문에 작동 성능이 실제로 브라우저에서 DOM을 보여주는 것보다 속도가 훨씬 빠르다. 리액트는 상태가 업데이트 되면, 업데이트가 필요한 곳의 UI를 가상 DOM으로 렌더링한다.

1장 2::

완^^

1장 3::

이와 같이, 작성한 코드는 쉽게 재사용할 수 있다고 한다. 이는 일종의 UI 조각이다.

이 곳 역시 JSX를 사용한다. JSX는 앞에서 공부했는데, JS에 XML을 합ㅊㄴ 것이라고 들었다.

리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 Babel이 JSX를 JS로 변환해준다.

이 때,

-태그는 꼭 닫혀있어야 하며 (HTML 등은 <br>, <input> 도 허용은 하지만 이 쪽에서는 <input />, <br />…로 제대로 닫아주어야 한다.

-두 개 이상의 태그는 무조건 하나의 태그로 감싸져있어야 한다. 그렇지 않으면 오류가 발생한다. 만약 불필요한 div가 곤란하다면 React의 Fragment도 괜찮다고 한다.

-JSX 안에 자바스크립트 값을 사용하고 싶을 때에는 {}로 감싼다.

-style과 CSS class를 설정하는 방식이 조금 다르다. ‘인라인 방식’은 객체 형태로 작성하며, background-color처럼 -로 구분되어 있는 이름들은 backgroundColor처럼 camelCase 형태로 네이밍해주어야 한다.

-그리고 만약 CSS class를 설정할 때에는 class가 아닌 className= 으로 설정해주어야 한다.

1장 5::

props를 통해 컴포넌트에게 값 전달하는 방법이다. props는 properties의 줄임말이다. 2학년 즈음에 이에 대해 배웠던 것 같은데 잘 기억이 나지 않는다.

최근에는 vuew.js를 이용한 어플리케이션을 만들 때 props를 써 본 적이 있다. 기억하기론 script에 props를 선언하고 넘겨주었었다….

props의 기본 사용법

예를 들어, App 컴포넌트에서 Hello 컴포넌트를 작성할 때 name이라는 값을 전달해주고 싶다고 가정해보자. 그 때에는 다음과 같이 코드를 작성할 수 있다.

  <Hello name ="react"/>

이

그런데 react는 그냥 매개변수에 props를 넣으면 된다는 점이 참 좋았다.

props 내부의 값을 조회할 때마다 props를 입력하고 있으나, 함수의 파라미터에서 비구조화 할당(* { } )을 이용하여 좀 더 간결하게 짤 수 있다. 다음과 같은 식이다.

오, props가 생각보다 쉽게 구현됨이 좋았다. 리액트는 짱이다.

1장 6::

이쯤에서 리액트 생성법을 복습하였다.

mkdir 폴더명

cd 폴더명

npx create-react-app 폴더명

…이면 끝나는데, 문제는 이제 폴더 생성에 너무 오래된 시간이 걸린다는 점이다.

어쩔 수 없이 전 폴더를 재사용하였다.

이 때, true와 false는 자바 스크립트의 값이라 { } (중괄호)로 감싸주어야 함에 유의해야 한다.

이후 삼항 연산자를 이용하여 isSpecial의 값이 true냐 false냐에 따라 컴포넌트의 좌측에 *이 표현하도록 코드를 수정하였다.

props 값을 설정할 때 이름만 작성하고 값을 설정하지 않으면 이를 true로 설정한 것으로 간주한다는 점 역시 즐거운 일이다.

이 곳에서는 카운터를 만든다.

기본 창을 만드는 건 쉬웠고, useState라는 걸 오랜만에 복습하게 되어 좋았다.

useState:: 함수형 또는 클래스형 컴포넌트의 상태를 관리하고, 변경할 수 있도록 도와주는 하나의 React Hook이다. 다양한 React Hook 중 하나인 useState는 함수형, 또는 클래스형의 컴포넌트에서 로컬의 데이터 상태를 관리할 수 있게 만들어주는 기능이다.

이는 초기 입력될 상태 값을 인자로 받아 상태 값과 해당 상태를 업데이트하는 함수를 쌍으로 반환한다.

예를 들어

const [value, setValue] = useState(0);

의 value는 저장된 값, 즉 useState(0)의 0의 값을 가진다.

setValue의 경우 value의 변경된 값을 저장할 수 있게 만들어준다.

useState는 동적 데이터를 다루는 것, 컴포넌트별 고유한 상태 값, 변경 가능성, 상태 관리를 통한 컴포넌트 내부에 캡슐화를 활용하여 UI 업데이트 등에 사용된다.

어쨌든, 지침을 따라 코드를 추가 및 수정하였다.

useState를 이용할 때에는 ‘상태의 기본값’을 파라미터에 넣어 호출함을 잊지 말것, 이 함수를 호출해주면 배열이 반환된다.

이 때 첫 번째 원소는 현재 상태, 두 번째 원소는 Setter 함수이다.

Setter 함수는 파라미터로 전달 받은 값을 최신 상태로 설정해준다.

1장 8:: Input 상태 관리하기

완

아니… 1: 8까지 마쳤는데 서버가 죽었다. 8월 5일 오후 2시 40분의 일이었다…

내 서버도 아니고 이 친구 서버가 죽는게 말이 되나..

엉엉 울며 github으로 겉핥기 했다.

‘리액트에서 객체를 업데이트하게 될 때에는 기존 객체를 직접 수정하지 맣고, 새로운 객체를 만들어 새 객체를 만들어야 한다’ 고 한다. 리액트 컴포넌트가 re-rendering을 할 때 virtual DOM에서 이전 컴포넌트와 새로 바꾸는 컴포넌트를 비교하게 될텐데, 기존 객체를 직접 수정하게 되면 새로 바뀐 컴포넌트에서는 이전 컴포넌트와 같은 상태를 가질 수 있다고 보기 때문에 ‘새 객체에 변화를 주어야 한다’ 고 말한다고 한다.??

input 상태 관리하기이므로, 같은 작가의 다른 글을 참고하여 정리하기로 하였다.

이는 위 글의 예시 코드 도중이다. 이렇게 하면 정상적으로 작동할 것 같지만! placeholder가 전화번호인 곳에 입력하면 placeholder가 이름인 란과 값인 란에 동시에 입력되는 등 정상적이지 않은 동작을 보인다.

또 다른 이벤트 핸들러를 만드는 방법이 있을지 모르나, 이것보다 더 나은 방법이 있다.

input의 name 속성을 사용하는 것. 각 input에 name 값을 부여함으로써 우리는 각 input을 구분할 수 있다.

이 name 값은 event.target.name을 통해 조회할 수 있다.

1-10: useRef로 특정 DOM 선택하기

여전히 서버가 동작하질 않아 같은 글을 가지고 공부한 사람의 게시글을 참고하기로 하였다.

useRef :: JavaScript의 getElementById, querySelector와 같이 DOM Selector 함수를 사용하여 DOM을 선택하는 것이다.

useRef() 를 이용하여 Ref 객체를 만들고 이 객체를 우리가 선택하고 싶은 DOM에 ref 값으로 설정한다. 그럼 ref 객체의 current 값은 우리가 원하는 DOM을 가리킨다. focus()는 DOM에 focus 하는 함수이다.

InputSample.js을 다음과 같이 수정했다::