React

1. SEO (Search Engine Optimization)란? : 검색엔진 최적화 ! => 웹사이트에 정보를 검색할 때 노출이 더 잘되게 만드는 작업 ! 2. React 환경에서의 SEO 처리 문제점 : CSR(Client Side Rendering) : React 환경에서 웹 렌더링은 CSR (Client Side Rendering): 클라이언트 사이드 렌더링을 한다 ! : 정적인 페이지에서의 SEO 처리에는 문제가 발생하지 않지만, 동적인 페이지에서 SEO 최적화는 어려울 수 있다. => 검색엔진은 API로 응답 받은 데이터가 반영되기 이전의 html문서만을 받아 판단하기 때문에 우리가 원하는 정보를 입력할 수 없음. CSR(Client Side Rendering) 란? : 렌더링이 클라이언트 ..

1. 개방-폐쇄 원칙 (Open-Closed Principle, OCP)란? : "소프트웨어 개체( 클래스, 모듈, 함수 등)는 확장에 대해 열려 있어야 하고, 수정에 대해서는 닫혀 있어야 한다"는 프로그래밍 원칙 ! (!확장성!) => 쉽게 말해서, 기존의 코드를 변경하지 않으면서 기능을 추가할 수 있도록 설계해야 한다는 것 ! 더보기 * OCP를 사용하지 않았을 때 예시와 문제점 : If-else의 조건문을 많이 사용했을 경우 변경, 확장이 될 수록 코드가 복잡해진다. 코드를 수정하거나 수정할 위치를 찾는데 오래걸린다. 실수로 추가하지 않고 누락하는 부분이 생길 가능성이 있다. => 유지보수가 어려워진다. 2. OCP 적용 방법 2-1. 상속 (is - a) 문제점 : "깨지기 쉬운 상위클래스 문제"..

1. Hook 이란 ? React Hooks은 React 16.8버전에 추가된 새로운 기능 ! -> 함수형 컴포넌트에서도 상태 관리 가능 ! Hook은 대표적으로 상태관리를 위한 useState, 렌더링 전후의 작업을 담당하는 useEffect 등이 존재한다. 더보기 Q 상태를 관리한다는 것이 무엇을 의미할까 ? 리액트는 컴포넌트를 기반으로 UI를 생성하는 라이브러리 ! 리액트의 컴포넌트는 여러 가지 데이터를 받아야하는데 이 데이터는 내부에서 선언 가능 , 다른 컴포넌트로부터 넘겨 받을 수도 있다. 여기에서, State는 내부에서 선언하고 관리되는 데이터 (함수에서 선언된 변수 값이라 이해 정확히는 x )를 뜻하고, Props는 컴포넌트로부터 받은 데이터 (함수에 전달되는 매개변수라 이해 정확히는 x )..

1. 컴포넌트란 ? 일종의 UI 조각 리액트로 만든 페이지는 여러 컴포넌트들로 구성 => 페이지 단위로 HTML을 작성하지 않고, 각 부분을 컴포넌트로 만들어서 조립해 사용 ( 코드 재사용이 쉽다 !! ) 더보기 Hello.js import React from 'react'; function Hello() { return 안녕하세요 } export default Hello; // Hello 라는 컴포넌트를 내보내겠다는 의미 App.js import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; 위는 App.js에서 Hello 컴포넌트를 불러와 사용한 예시이다 . 컴포넌트를 ..