Dom
DOM은 웹페이지의 나타냄 같은 것으로, 자바스크립트와 소통한다.
트리 같은 구조로, 각 노드가 html 페이지에 해당한다.
JS는 DOM을 이용해서 html에 interactivity를 추가한다고 할 수 있다.
그러나 DOM이 각각의 태그를 잡아서 하나하나 다 바꾼다고 생각하면 조금 비효율적일 수 있다.
그래서 React가 좋은 새로운 방법으로 등장했는데,
리액트는 DOM이 나타내는 것의 가상 복사본, virtual DOM을 만든다. 이 virtual DOM은 진짜 DOM에 변화를 일으킬 때 가장 적절하고 효율적인 방법을 찾아서 결정하는 역할을 한다.
그래서 React는 사실 진짜 JS는 아니고 HTML과 JS의 짬뽕인 JSX라는 것으로 이루어져있다. 리액트의 virtual DOM에 의해서 최적화된 웹사이트의 동작을 할 수 있게 하고, 이렇게 할 때 HTML안에 우리가 직접 JS 코드를 집어넣으면서 코딩을 할 수 있는 것이다.
Import & Export Notation
원래 자바스크립트에서는 JS를 쓰기 위해서는 HTML 페이지에서 사용하려면 < script > 태그를 써서 링크를 걸어서 불러와주어야 한다.
리액트에서는 import와 export에 해당하는 선언이 따로 있다.
import axios from "axios";
export const {Object};Ternary Operators & Conditionals
이전 글에서 다뤘는데 페드로씨가 이번 영상에서도 얘기하길래 한 번 더 필기하고 넘어가겠다.
?는 if에 해당하고, :는 조건에 따른 결과에 해당한다.
let myAge = 18;
let isAcceptable = true;
if (myAge>18) {
isAcceptable = true;
}else{
isAcceptable = false;
}
isAcceptable = myAge > 18 ? true : false;위의 두 코드 뭉치는 같은 의미를 나타낸다.
조금 더 ui와 맞닿아있는 예시를 들어서 생각해보자.
퀴즈를 맞추냐 틀리느냐에 따라 색깔이 초록/빨강으로 변한다고 생각하자.
let color = "green"
let isCorrect = false
color = isCorrect ? green : red;
//(혹은) color = isCorrect && green;이렇게 코드 줄 수를 줄이면서 효율적으로 코딩할 수 있게 해주는 것이 ternary operator, 삼항연산자이다.
Optional Chaining
리액트를 이용하는 중에, 쓰고자 하는 데이터가 명확하지 않거나 순서가 잘못되면 작동이 잘못 되는 경우가 많다.
JS의 기본 규칙인 데이터를 사용하기 전에 미리 불러와야 한다. 는 것을 지키지 않는다면 곤란해진다.
const fetchData = async () => {
const data = await fetch("imaginaryapi.com");
const name = data.person.name;
}이 코드에서 데이터를 fetch하기도 전에 데이터에 접근해서 사람의 이름을 사용하려고 하는 것이 그런 곤란한 경우 중 하나일 것이다. 필드가 존재하기도 전에 필드에 접근하려고 하는 것이다.
그래서 어떤 객체의 특정한 key에 접근하고자 한다면, 그 key가 존재할 때만 시도해야 한다.
const fetchData = async () => {
const data = await fetch("imaginaryapi.com");
const name = data.person?.name;
}위 코드에서는 ?을 추가해서 사람의 데이터가 존재하는 경우에만 이름에 접근하도록 하고 있다. 그리고 이것은 어떤 객체에 접근하든지 ?을 붙여서 사용할 수 있기 때문에 에러를 막는 데에 매우 유용하다.
