0812 TIL React

🙆‍♀️SPA(Single-Page Application) 개념을 이해하고 설명할 수 있다.

SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라,
화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트를 말한다.

🙆‍♀️SPA의 장, 단점에 대해 이해하고 설명할 수 있다.

• 장점: 전체 페이지가 아니라 필요한 데이터만 받아서 화면에 업데이트하면 되기 때문에 사용자와 interaction에 빠르게 반응한다.
  서버 과부화 문제가 줄어든다. 속도가 빠르다.

• 단점: JavaScript 파일이 무거워서 이 JavaScript 파일을 기다리는 시간으로 인해 첫 화면의 로딩 시간이 길어진다.
  검색엔진 최적화에 좋지않다.

🙆‍♀️와이어프레임을 보고 어느 부분을 컴포넌트로 구분할 지 스스로 정할 수 있다.

🙆‍♀️React에서 npm으로 React Router DOM을 설치(npm install react-router-dom)하고 이용할 수 있다.

🙆‍♀️React Router DOM를 이용하여 SPA를 구현할 수 있다.

🙆‍♀️라우팅 구조를 짤 수 있어야 하고, 이에 필요한 기초 문법들을 사용할 수 있어야 한다.

React Router 에서 <a>태그가 아닌 <Link>태그를 사용하는 이유

<a>태그는 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 다시 처음부터 렌더링을 시킨다. 즉, 새로고침 현상이 일어난다.
하지만 <Link> 컴포넌트는 페이지 전환을 방지하는 기능이 내장되어있기 때문에 SPA를 구현할 수 있다.

Switch

Switch컴포넌트는 여러 route중에서 일치하는 단 하나의 route만 렌더링한다.

고차함수 28번

function getLengthOfLongestElement(arr) {
 return arr.reduce(function(acc,cur){
   let longest = acc
   if(cur.length > longest.length){
    longest = cur
   }
   else{
     longest = acc
   }
   return longest   //reduce는 return value가 다음바퀴의 acc값이 되기때문에 longest.length로 첫번째바퀴가 끝나고 그 다음바퀴에 longest가 숫자가된다.
 },'').length
}

// 문자열을 요소로 갖는 arr를 입력받아 가장 긴 문자열의 길이를 리턴해야한다.
//reduce로 가장 긴 문자열을 return한다.
//그리고 그 리턴값의 길이에 .length 를 붙인다.

acc가 처음에만 초기값이고 그 다음 바퀴부터는 return된 값이 acc에 할당된다는 것을 잘 몰랐었다. 개념이 약해서 헤맸던 문제였다.

그외

공식문서에서 "This is by design"
이런식으로 써있는건 그냥 알려고하지말고 쓰라는 말이다. 작동방법이 매우 복잡하다. 규칙이다.

react에서 컴포넌트 밖에는 //blahblah 이렇게 주석을 쓸 수 있고
컴포넌트 안에선 {/* blahblah*/} 요렇게쓴다.