React

📕 Frontend-Framework(Library) " Angular VS Vue VS React " Angular : TypeScript 기반으로 안정적이고 탄탄한 app개발이 가능하며,Framework답게 다향한 기능이 내장되어있다. 하지만 무겁고 배우기가 어렵

📕 SPA >Single Page Application (싱글 페이지 어플리케이션)의 약자이다. 즉, 페이지가 1개인 어플리케이션이란 뜻으로 유저가 요청 할 때 마다 페이지가 새로고침 제공되는 정보가 정말 많기 때문에 속도적인 측면에서 문제가 발생하고, 불필요한 트래

React에서는 key의 값을 통해서 어떤 아이템에 변화가 있었는지를 인식한다.하지만 key props를 지정해주지 않으면 사이트가 전체적으로 불필요한 렌더링을 진행한다.따라서 map을 사용할 때는 고유한 key값을 반드시 사용해줘야 한다.map의 두번째 인자인 ind

Hook 이란? React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이, state와, 여러 React 기능을 사용할 수 있도록 만든 라이브러리라고 할 수 있다. Hook의 특징 함수 컴포넌트도 클래스 컴포넌트처럼 사용할 수 있다. 함수 컴포

JSX은 자바스크립트를 확장한 문법으로 UI가 어떻게 생겨야 하는 지 설명하기 위해서React와 함께 사용할 것을 권장한다.JSX은 React엘리먼트(element)를 생성한다.React에서 본질적으로 렌더링 로직이 이벤트가 처리되는 방식, 시간에 따라 state가 변

props는 properties의 줄임말로, 어떠한 값을 컴포넌트에게 전달해 줘야할 때 props를 사용한다.APP컴포넌트에 Hi컴포넌트를 사용할 때 name이라는 값을 전달하고자 한다고 가정해보자이제 Hi 컴포넌트에서 name 값을 사용하고 싶을 때는 어떻게 해야할까

css, scss 파일을 밖에 두고 태그나 id, class 이름으로 가져와서 쓰지 않고 동일한 컴포넌트에서 컴포넌트 이름을 쓰듯이 스타일을 지정하는 것을 styled-components라고 부른다. css파일을 밖에 두지 않고 컴포넌트내부에 넣기 때문에 css가 전역

화면에 첫 렌더링하는 Mount, 다시 렌더링하는 Update, 화면에서 사라질 때특정 작업을 처리할 코드를 실행시키고 싶을 때 useEffect를 사용한다.jsuseEffect(() => {})기본적으로 useEffect hook은 callback함수를 받으며, 여기

리액트 아이콘위와 같이 사용하고자 하는 아이콘이름을 {}안에 넣어주면 된다.다시 리액트 홈페이지로 가서 원하는 아이콘을 선택해주면 자동으로 컴포넌트 이름이 복사가 된다.react icons를 import하고 복사한 컴포넌트를 넣어주면 된다. 만일 원하는 아이콘 컴포넌트