Hook Hook은 함수 컴포넌트에서 React state와 생명주기 기능을 연동(hook into)할 수 있게 해주는 함수이다. Hook은 class 없이 React를 사용할 수 있게 해준다. useState, useEffect와 같이 React에서 자체 지원하는 내장 Hook이 있으며, 직접 custom Hook을 만드는 것도 가능하다. Hook 사용 규칙 Hook을 사용할 때에는 두 가지 규칙을 준수해야 한다. 1. 최상위에서만 Hook을 호출해야 한다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안된다. React에서는 한 컴포넌트에서 State나 Effect Hook을 여러 개 사용할 수도 있다. function Form() { // 1. name이라는 state 변수를 사용 co..

DOM DOM(Document Object Model, 문서 객체 모델)은 스크립트 언어로 HTML 요소를 제어할 수 있도록 웹 문서를 객체화 한 것이다. HTML이 작성되는 형식을 보면 위와 같은데, 이러한 구조를 표현하면 아래와 같이 나타낼 수 있다. 이를 나무 모양의 트리구조를 갖게 된다고 하여 DOM tree라고 하며, 각 요소를 노드라고 한다. 브라우저의 동작 과정 위의 브라우저 동작 과정 그림을 살펴보면 HTML 코드로 DOM 트리를 생성하고, 이에 스타일을 조합하고, 화면에 어떻게 배치할지 정리 및 렌더링하여 화면에 표시하게 된다. Virtual DOM SPA 방식과 같은 페이지에서 일부만 변경하게 되더라도 일련의 과정을 모두 거치게 되므로 많은 비용이 소모되는데, 이를 보완하기 위해 사용되..

Props란? Props는 properties의 약자로, React에서 지원하는 JavaScript 객체이다. 컴포넌트를 사용할 때, props를 활용하여 부모 컴포넌트에서 자식 컴포넌트로 정보를 전달할 수 있다. 사용 function Welcome(props) { return Hello, {props.name}; } function App() { return ( ); } 위 코드를 살펴보면 1. App 컴포넌트에서 Welcome 컴포넌트를 세 번 호출한다. 2. props의 name으로 각각 "Sara", "Cahal", "Edite"이라는 정보를 전달한다. 3. Welcome 컴포넌트에서는 매개변수로 받은 props에서 props.name의 정보를 가져와 아래와 같이 출력된다.

State란? state는 React에서 지원하는 JavaScript 객체로, 렌더링 결과물에 영향을 주는 정보를 가지고 있다. useState useState를 이용하여 state와 state의 값을 수정할 수 있는 함수를 생성하고, 초기값을 설정할 수 있다. 아래와 같은 코드가 있다고 할 때, const [state, setState] = React.useState(0); // state 선언 및 초기화. 초기값: 0 "state" 자리에 state명을 넣고, "setState"에는 값을 수정할 함수명, useState의 매개변수에 초기값을 넣어 사용한다. 값을 수정할 함수명이 set + "state명"일 필요는 없다. setState function onClick() { setState((state..

SPA 전통적인 방식의 웹 애플리케이션 방식은 각각의 페이지가 나뉘어 있어 사용자가 페이지를 요청할 때마다 새로운 페이지를 불러오는 MPA(Multi Page Application) 방식과 대조되는 방식으로, SPA 방식은 사용자가 요청하는 콘텐츠를 body 태그에 불러와 동적으로 동작한다.

HTML 문서나 데이터를 처리하기 위해 문서에 추가되는 정보를 마크업이라고 하며, 책에 밑줄을 긋거나 필기를 하는 행위 등도 마크업이라고 할 수 있다. 이러한 마크업 정보를 표현하기 위한 언어를 마크업 언어라고 한다. HTML은 마크업 언어의 한 종류로, 웹사이트의 뼈대를 구성한다.