JSX란? const element = Hello, world!; 위에 희한한 태그 문법은 문자열도, HTML도 아니다. JSX라 하며 JavaScript를 확장한 문법이며, JavaScript의 모든 기능이 포함되어 있다. UI의 편리한 렌더링을 위해 React와 함께 사용할 것이 권장된다. 리액트에서 JSX를 꼭 사용해야하는 것은 아니다. 근본적으로, JSX는 React.createElement(component, props, ...children) 함수에 대한 문법적 설탕(Syntactic sugar)을 제공할 뿐이다. 즉 JSX는 React “엘리먼트(element)” 를 생성한다. 예를 들어 다음의 JSX로 작성된 코드는 class Hello extends React.Component { ren..

지금 있는 회사에서 어쩌다보니 프론트엔드 리드를 하게 된 후, aws 스터디에 이어 리액트로 seo를 해야 하는 상황에 봉착했다. 그래서 최대한 많은 구글링 이후 지금까지 시도해본 것들을 기록해보고자 한다. 1. Sitemap 만들기SEO를 개선하기 위해 react-router-sitemap 라이브러리를 사용하여 public 폴더 안에 sitemap.xml 파일을 생성하였다.  리액트 프로젝트 사이트맵 생성리액트 프로젝트 사이트맵 생성 구글 검색을 최적화하려면 사이트맵을 제출해야 한다. yarn과 npm을 혼용했는데 웬만하면 하나로 통일해서 사용하는게 좋은 듯하다. react-router-sitemap 패키지를 사caniro.tistory.com 2. robots.txt 설정구글봇(구글 웹 크롤러 봇) ..

1. DOM이란 ? “DOM은 HTML, XML document와 상호작용하고 표현하는 API이다. DOM은 browser에서 로드되며, Node(이하 노드) 트리(각 노드는 document의 부분을 나타낸다)로 표현하는 document 모델이다. ex. element, 문자열, 혹은 코멘트” -MDN- 프로그램이 문서 구조, 스타일 및 내용을 변경할 수 있도록 문서를 노드와 객체로 나타냅니다. 위 사진을 보고 HTML이 DOM이라고 생각할 수 있지만 그렇지는 않습니다. IDE에서 작성한 HTML은 DOM이 아니고 작성된 HTML 문서가 브라우저에 의해 해석되어 실제 문서를 나타내는 노드 트리가 DOM입니다. 이렇게 하는 이유는 프로그래밍 언어가 페이지와 상호 작용할 수 있게 하기 위해서 입니다. DOM..

Component란? 컴포넌트는 리액트의 핵심 빌딩 블록 중 하나입니다. 리액트에서 개발하는 모든 애플리케이션은 컴포넌트라는 조각으로 구성되죠. 컴포넌트는 UI 구축 작업을 훨씬 쉽게 만들어줍니다. 컴포넌트란 리액트의 핵심 빌딩 블록 중 하나로, UI 요소를 표현하는 최소한의 단위이며 화면의 특정 부분이 어떻게 생길지 정하는 선언체입니다. 컴포넌트를 생성하고 보여지고자 하는 UI 요소를 컴포넌트 내부에서 JSX를 통해 선언하면 이를 리액트가 화면에 그려줍니다. 리액트 컴포넌트가 선언체라는 개념은 아주 중요합니다. 그 이유는 리액트의 컴포넌트기반 개발 이전에는 브라우저에서 동적으로 변하는 UI를 표현하기 위해 직접 DOM 객체를 조작하는 명령형 프로그래밍 방식으로 구현했습니다. 그렇다면 기존 명령형 프로그..

ref란? HTML을 작성할 때, div 등의 DOM 요소에 이름을 달 경우 와 같이 id를 사용한다. 이렇게 하면 특정한 id에 해당하는 DOM 요소에만 스타일을 따로 적용하거나, 자바스크립트에서 해당 DOM 요소에 접근하여 여러 가지 작업을 할 수 있다. HTML을 작성할 때 이렇게 id를 붙이는 것처럼, 리액트에서도 DOM을 선택해 직접 접근하기 위해 ref를 사용한다. React에서 state로만 해결할 수 없고, DOM을 반드시 직접 건드려야 할 때 사용한다. 예를 들어 특정 input에 focus 주기, 스크롤 박스 조작, Canvas 요소에 그림 그리기 등 이 있다. 왜 DOM API를 쓰면 안될까? document.getElementsByClassName과 같은 자바스크립트 문법을 쓰는 것..

state가 바뀌면 자동으로 변경된 새로운 값을 가지고 모든 컨포넌트가 처음부터 다시 실행된다. 그런데 이게 괜찮을 때도 있지만 대부분의 경우 API로 데이터를 불러오는 코드가 있게 되면 state가 바뀔 때마다 계속 API로 데이터를 불러오게 되어 매우 비효율적이게 된다. 이를 막기 위해선 useEffect를 사용해야한다. useEffect에는 두가지 argument가 필요한데, 첫번째는 실행할 구문이 들어가면 되고, 두번째로는 무엇이 변화할 때 첫번쩨 인자인 구문을 실행할지를 정하는 dependency가 들어가면 된다. 즉 다음의 예시에서 두번째 useEffect는 해당 구문이 맨 처음 render할 때 실행되고,또 keyword가 변화할 때 실행된다고 생각하면 된다. 첫번째 예시의 경우 depend..

참고로 여기 코드는 node.js를 사용하지 않을 때라서 props를 사용할려면 맨 아래script처럼 해당 링크를 불러와야한다.

HTML 코드 아래는 리액트 코드