[React JS] 객체

본 게시글은 하단의 게시글을 참고하여 작성되었다.

인프런의 리액트 강의를 듣게 되었다. 짧은 시간 멘토링을 통해 배우던 중 리액트에 대한 것을 학습하는 것이 좋다는 이야기를 들어 수강하게 되었다.
초반부의 대부분의 내용이 익숙하였으나 객체에 대한 설명 도중 알지 못하던 내용이 나와 정리하기 위해 게시글을 작성하게 되었다.

내가 제대로 알지 못하던 부분은 자바스크립트의 ‘객체’ 부분이다.

자바스크립트의 객체란
관련된 데이터와 함수(객체 안에 있는 데이터와 함수는 대개 각각 ‘프로퍼티’, ‘메소드’라 부른다.)의 집합이다.

…위와 같이 변수명으로 선언하는 것으로 시작하며, 이를

…와 같이 업데이트할 수 있다.

우리는 이 요소에 대해 person. name; person. age, person. name[0];
…등으로 접근할 수 있다.

이런 객체는 각기 다른 이름(위의 예시에서는 name과 age, 예제에서는 [‘Bob’, ‘Smith’]와 32)을 갖는 복수개의 멤버로 구성된다. 한 쌍의 이름과 값은 ‘,’로 구분되어야 하며 이름과 값은 ‘:’로 구분된다.

한입 크기로 잘라 먹는 리액트: 기초부터 실전까지 1.15~1.16

이 객체를 이용하면 현실 세계에 존재하는 사물이나 개념을 표현할 수 있다.

자바스크립트에서는 이 두 가지 방법을 이용하여 객체를 생성할 수 있으며,

와 같이 서술할 수 있다.
이 각 객체의 속성을 프로퍼티라 하며, 왼쪽에 있는 값을 ‘키’, 오른쪽에 있는 값을 ‘value’라 정의한다. 프로퍼티의 갯수, value의 자료형에는 제한이 따로 없다.

특정 프로퍼티에 접근할 때에는 ‘점 표기법’, (person. name), 괄호 표기법(person[age])로 접근하며, 추가할 때에도 같은 방식으로 하되, 없는 프로퍼티를 새로 선언하면 된다.

프로퍼티를 삭제할 때에는

둘 중 하나의 방법을 사용하면 된다.

한편 프로퍼티의 존재 유무를 확인하는 방법도 있다. 이 때에는 in 연산자를 사용한다.

…와 같이, in 연산자를 이용하여 객체 내의 존재 여부를 확인할 수 있다.

또, const로 선언한 객체에 새 객체를 재할당하는 것은 불가능하나, 프로퍼티를 추가, 수정, 삭제하는 것이 가능하다는 것은 꽤 신기한 일이었다. const가 값을 변경하지 않도록 제한하는 변수 선언자여서 일어난 일이다. 객체는 대부분이 const로 선언하던데 이렇게 객체를 직접 재할당하는 것을 막기 위함인듯 싶었다. 자바의 경우 객체 내에 메소드를 직접 선언하는 것이 가능한데, 자바스크립트는 키: 함수…로, 프로퍼티의 값(value)이 함수가 되도록 선언한 것만 메소드로 한다는 것도 신선한 지식이었다. (이 함수는 괄호 표기법, 점 표기법으로 호출 가능하다.)

[참고자료]

-https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Basics

-https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8?attributionToken=ChQxNjQ5NDY0NjYxMjUxMTgzNTQ4OBANGiNyZWNvbW1lbmRlX3JlY29tbWVuZGVfMTcwMjUyNjQzNDA2NiIXcmVjb21tZW5kZWQtZm9yLXlvdS1jdnIoADootPHREvfx0RKM8tESsvHREqny0RKt8tES-vHREo_y0RK78tESvvLREg