11일차 (SEO, CRA, Component, Props, 불변성)

SEO(Search Engine Optimization)

정의: 구글과 같은 검색 엔진에서 웹사이트의 가시성을 향상시키는 프로세스

목표: 누군가가 웹사이트의 콘텐츠과 관련된 특정 키워드를 검색할 때 해당 웹사이트가 검색 결과에서 더 높은 순위에 표시되도록 하는 것

효과: 광고 비융을 지불하지 않고도 유기적으로 더 많은 방문자 유치 가능

 

CRA(Create React App)

한 줄의 명령어 입력으로 React 프로젝트 개발에 필요한 필수 요소를 자동으로 구성하는 방법 == 보일러 플레이트

 

Component

기능: 컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 다룰 수 있음

입출력: Props라는 임의의 값을 입력 받은 후, 화면에 어떻게 표시되는지를 기술하는 React Element를 반환

//부모 자식 컴포넌트
function Child() {
  return <div>나는 자식입니다.</div>;
}

function App() {
  return <Child />;
}

 

Props

1. 컴포넌트끼리 정보 교환 방식

2. 부모에서 자식 방향으로만 흐름

3. 읽기 전용으로 취급하며 변경하지 않음

4. 자식 컴포넌트에게 부모 컴포넌트가 가지고 있는 데이터를 물려주는 방식

Props Drilling: 조부모 -> 부모 -> 자식 -> 손자 ...으로 내려가면서 데이터가 전달되는 것

// DefaultProps: 부모 컴포넌트에서 Props를 보내주지 않아도 설정될 초기 값
Child.defaultProps = { age: "기본나이"};

부모 컴포넌트에서 age에 해당하는 값을 보내지 않으면 '기본나이'가 default 값이 됨

------------------------------------------------------------------------------------

Default Argument: 매개변수가 지정되지 않았으면 자동으로 지정해줄 값을 정하는 것
function Child({ age = 22, name, children})

DefaultProps와 기능은 같으며, Default Argument는 부모 컴포넌트로부터 매개변수를 받을 때 설정함

 

불변성

개념: 메모리에 있는 값을 변경할 수 없는 것

원시 데이터는 불변성이 있음

객체, 배열과 같은 참조 데이터는 불변성이 없음
	-> 이유: 참조 데이터는 값이 변경되어도 저장된 메모리 주소는 변경되지 않기 때문에
    -> 따라서 참조 데이터의 값을 변경하더라도 주소값이 변경되지 않았기 때문에 React는 알지 못함
    -> 그 결과 랜더링이 되지 않음
  => 해결방안: 스프레드 연산자를 활용해서 새로운 객체를 만들어 주면 됨