10/31

props와 state의 용도 차이

props는 상위로부터 받아온 것이며 state는 component와 component사이에서 작동하는 변수다

서버 빌드 에러 발생

Resource interpreted as Stylesheet but transferred with MIME type text/html 해결 : 

https://stackoverflow.com/questions/41734976/resource-interpreted-as-stylesheet-but-transferred-with-mime-type-text-javascrip

Resource interpreted as Stylesheet but transferred with MIME type text/javascript

Uncaught SyntaxError: Unexpected token '<' 해결 : 

https://cpdev.tistory.com/116

불러오는 중입니다...

js closure

https://hyunseob.github.io/2016/08/30/javascript-closure/

JavaScript 클로저(Closure)

클로저는 독립적인 (자유) 변수를 가리키는 함수이다. 또는, 클로저 안에 정의된 함수는 만들어진 환경을 ‘기억한다’.

클로저를 이용해서 각각 다른 함수나 변수 환경을 만들어 낼 수 있다. 물론 이로인해서 메모리 문제가 생기기도 한다.

 

https://rinae.dev/posts/a-complete-guide-to-useeffect-ko#tldr-too-long-didnt-read---%ec%9a%94%ec%95%bd

[번역] useEffect 완벽 가이드

읽어보고 생긴 궁금점

1. 최신의 prop과 state를 필요로 한다면 ref에 담아두고 사용하면 된다고하는데 최신이 아닐 경우가 존재하는가...?

props가 변하면 component가 rerendering이 되지 안나? 근데 최신이 아닌경우가 존재한다고...?

2. useCallback은 현재의 데이터를 변화한값을 전체를 erendering시키지않고 그값일부만 변형시키는것으로알고있다. 정확한 용도가 어떻게된것인가 잘모르겟다

3. rendering이 되는데 useEffect(()=>{},[])가 작동하는 시기의 rendering은 기준이 언제인가. useState로 작동하는 rendering과 차이점이 어던것인가??

4. clean up에 대한 개념을 알겠지만 쓰지는 곳에 대한 예시설명을 한번정도 더 들었으면 좋겠다.

dump lodash란 메일이 깃헙에서 왓다 뭔뜻이지...

https://www.robinwieruch.de/react-hooks-fetch-data

How to fetch data with React Hooks? - RWieruch

 

import React, { Fragment, useState, useEffect } from 'react';
import axios from 'axios';
function App() {
  const [data, setData] = useState({ hits: [] });
  const [query, setQuery] = useState('redux');
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        `http://hn.algolia.com/api/v1/search?query=${query}`,
      );
      setData(result.data);
    };
    fetchData();
  }, [query]);
  return (
    <Fragment>
      <input
        type="text"
        value={query}
        onChange={event => setQuery(event.target.value)}
      />
      <ul>
        {data.hits.map(item => (
          <li key={item.objectID}>
            <a href={item.url}>{item.title}</a>
          </li>
        ))}
      </ul>
    </Fragment>
  );
}
export default App;

이 상태 사용해보는것 괜찬을것 같다

import React, { Fragment, useState, useEffect } from 'react';
import axios from 'axios';
function App() {
  const [data, setData] = useState({ hits: [] });
  const [query, setQuery] = useState('redux');
  const [url, setUrl] = useState(
    'https://hn.algolia.com/api/v1/search?query=redux',
  );
  const [isLoading, setIsLoading] = useState(false);
  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      const result = await axios(url);
      setData(result.data);
      setIsLoading(false);
    };
    fetchData();
  }, [url]);
  return (
    <Fragment>
      <input
        type="text"
        value={query}
        onChange={event => setQuery(event.target.value)}
      />
      <button
        type="button"
        onClick={() =>
          setUrl(`http://hn.algolia.com/api/v1/search?query=${query}`)
        }
      >
        Search
      </button>
      {isLoading ? (
        <div>Loading ...</div>
      ) : (
        <ul>
          {data.hits.map(item => (
            <li key={item.objectID}>
              <a href={item.url}>{item.title}</a>
            </li>
          ))}
        </ul>
      )}
    </Fragment>
  );
}
export default App;

여기서 useEffect 내에 rendering -> useEffect -> setIsLoading(true) -> rendering -> axios (완료될때까지) -> setData -> rendering -> setIsLoading(false) -> rendering이 실행되는 건가요? 아니면 setIsLoading이 되더라도 끝까지 실행된 이후에 되는건가? 이게 heap에 어떻게 쌓이는건지 궁금하다.

await axios를 하게되면 return값이 처리될때까지 다음 문장이 실행되지 않는것인가?

e.preventDefault가 이벤트전파를 제외한 별도의 브라우저 행동을 막기 위해 사용한다고 하는데 별도의 브라우저 행동이 어떤일이 있나요??