TIL_ React

Today 공부

SPA Single Page Application

---

HTMl 문서 전체가 아니라 업데이트에 필요한 데이터만 받아,
페이지가 전환 전후에 중복되는 부분은 새로 불러오지 않게한다

이러한 개발방식을 이용한 웹 애플리케이션이 보편화되고,
이것이 SPA 입니다.

페이지 갱신에 필요한 데이터만 받아 그 기준으로 현재의 페이지를
업데이트 함으로써 사용자와 소통하는 웹 어플리케이션 or 웹사이트

SPA 장점

• 서버 과부하 Down
• 전체 페이지 렌더링 필요 X
• 필요한 부분만 화면 업데이트 하여 사용자와 interaction에 빠르게 반응

SPA 단점

• JavaScript 크기가 커 파일을 기다리는 시간으로 첫 화면 로딩 시간이 길어진다
• HTML 파일은 별 다른 자료가 없기 때문에 검색 엔진 최적화가 좋지 않다

---

Router Routing

다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."
라는 의미로 라우팅(Routing) 이라고 합니다.

---

Routing 을 위해 React Router 라는 라이브러리를 가장 많이 사용한다.

주요 컴포넌트

• BrowserRouter - router
• Switch - route matchers
• Route - route matchers
• Link - Link

function App() {
  return (
    <BrowserRouter> // 제일 크게 열어주고 
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>{/* Link 컴포넌트를 이용하여 경로를 연결합니다 */}
            </li>
            <li>
              <Link to="/about">MyPage</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>

        <Switch> // 스위치
          <Route exact path="/"> // 1. 경로설정 하고 --> "/"로할거야
            <Home /> // 2. 컴포넌트에 연결 --> 이 컴포넌트에
          </Route>
          <Route path="/about"> // 1. 경로설정
            <MyPage />  // 2. 컴포넌트 연결 
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch> // 스위치
        
      </div>
    </BrowserRouter> // 제일 크게 닫아주고 
  );
}

function Home() { // 컴포넌트 생성
  return <h1>Home</h1>;
}

function MyPage() {  // 컴포넌트 생성
  return <h1>MyPage</h1>;
}

function Dashboard() {  // 컴포넌트 생성
  return <h1>Dashboard</h1>;
}

export default App;

---

.map

---

1.

let viewLangs = langs.map((it) => { // 변수에 배열의 맵으로 돌려 <p>태크와 객체 안의 값이 나오게 한다.
      return <p>{it}</p>;
    });
    
  return (
    <div>
      {viewLangs} // 위에서 map 으로 만든 변수 출력
    </div>
   );

2. 

return (
    <div>
       {langs.map((it) => { // 리턴문 안에서 {} 로 열면 안에 return 한번 더 해야한다 
        return <p>{it}</p>;
      })} 
    </div>
  );


3. 

  return (
    <div>
      {langs.map((it) => ( // 소괄호 () 로 열었을때는  별도의 return 문이 필요 없다.
        <p>{it}</p>
      ))}
    </div>
  );'

4.

const Tweets = () => { // Tweets 컴포넌트, 화살표 함수로 중괄호를 연다
  return ( // 나오는 리턴문
  <ul className="tweets">  // tweets라는 className을 가진 ul tag 
   {dummyTweets.map((tweet) => { // dummyTweets의 element (tweet)들이 map 메서드에 의해 li 태그 안에 삽입
   return (
  <li className="tweet" key={tweet.id}>
  <div className="tweet__profile"></div>
 )
       
 dummyTweets의 타입 = 배열
 그 안의 엘리먼트 = 객체 (tweet)
 map 메서드에 의해 li 태그에 삽입되고 있는 엘리먼트의 타입 = 객체
  ----> 객체의 값을 사용하려면 dot notation을 이용
컴포넌트 또는 어딘가에 할당하는 .map 이 아닐 시에
       {.map(() => { return (    )    }  } 앞 뒤 중괄호 

 
 5. 

  const postToElement = (post) => ( // post매개변수
    <div>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );

  const blogs = posts.map(postToElement); // posts라는 자료 존재 , map으로 함수 이용 

  return <div className="post-wrapper">{blogs}</div>;
}