React
-
api response와 async 함수, awaitReact 2023. 3. 22. 15:12
async 함수 : 비동기 함수 ( 호출 시점에서 실행결과를 기다리지 않는 함수 ) -> 자바스크립트의 경우 single thread 기반 언어이기 때문에, 한 번에 하나의 작업이 가능하다. 하지만 비동기 함수를 사용하면 함수의 실행결과를 기다리지 않고 다른 작업을 수행하기 때문에 브라우저에 화면이 병렬적으로 로딩되게 만들 수 있다. ( 동기함수의 하나의 작업이 끝나지 않으면 화면이 멈출 수 있음 ) async function 함수명() { return something; } : async는 function 앞에 위치할 수 있으며, async 가 붙은 함수는 항상 프라미스를 반환한다. 프라미스가 아닌 값이라면, 이행 상태의 프라미스로 값을 감싸서 이행된 프라미스가 되도록 만든다. await : async..
-
git hub를 이용해 웹 사이트 배포하기React 2023. 3. 21. 09:24
1. gh-pages 란? React로 만든 페이지의 결과물을 github pages에 업로드 할 수 있다. npm i gh-pages html , css , javascript를 올리면, 웹 사이트로 만들어서 전 세계에 무료로 배포해주고 도메인도 만들어준다. package.json에 있는 build를 실행하면, 웹 사이트의 production ready code를 생성한다. ( build 파일 생성 ) production ready : 코드가 압축되고 모든 기능이 최적화 된다. - 이후에 git push 해준다. 자동으로 gh-page 실행하는 방법 1. homepage URL 설정하기 이후에 package.json의 마지막에 , 를 찍고 URL을 입력한다. }, "homepage": "https://..
-
React Router ( parameters )React 2023. 3. 20. 23:17
라우터에서 우리는 url을 좀 더 유연하게 사용할 수 있다. 1. 파라메터가 있는 URL 생성 /movie/:parameter -> 다음과 같이 선언하면 parameter에 따라 다른 URL을 가진 .js 페이지를 불러올 수 있다. 2. 파라메터가 있는 URL 로 이동하기 Link 태그 내부에 to={`/movie/@{parameter}`} 을 선언해주는 것으로 parameter에 따라 다른 URL을 가진 페이지로 이동할 수 있다 rank의 값이 1인 링크를 클릭했더니, localhost:3000/movie 뒤에 /1 이 생긴것을 확인할 수 있다. - API 에서 데이터를 가지고 온다면, 각 요소들이 가지고 있는 id 값을 parameter로 사용할 수 있겠다. 3. Detail.js 가 여러가지 URL..
-
useEffectReact 2023. 3. 19. 22:50
- useEffect : api 처럼 렌딩할 때 불러들였던 정보를 다시는 부르고 싶지 않을 때 ( 한번만 불러도 될 때 ) 사용한다. 어떤 로그들은 렌딩할 때 다 같이 렌딩 된다. 하지만 같은 데이터가 주어질 때 거부하는 방법이 있다. useEffect( 실행하고싶은함수 , [keyword] ); -> keyword의 값이 변할 때만 함수를 실행시킨다. 이를 이용해서 api를 처음 한 번만 불러오는 등 함수의 실행을 제어할 수 있다. useEffect( 실행하고싶은함수 , [] ); -> 키워드에 값이 없으면 한번만 실행하고 다시 실행할 수 없다. *** Create React App 의 index.js 에는 의 형식으로 App을 불러들인다. 따라서 새로고침 할 경우 app의 랜더링이 항상 2번씩 된다...
-
React Router (ver. 6 이상)React 2023. 3. 19. 21:35
React Router (ver. 6 이상) create-react-app 명령이 실행된 경로에서 npm install react-router-dom 버전을 지정해서 받고싶다면 npm install react-router-dom@버전 - package.json 돌더 내부에 react-fouter-dom 요소가 추가되어있다 ( ^6.9.0 ) 버전 - 리액트 라우터는 flask에서 URL/keyword 를 설정해서 홈 페이지의 스크린(구획)을 이동하는 것 처럼 홈페이지를 주제에 맞게 나눌 수 있는 기능이다. - 리액트에서는 각각의 페이지를 라우터라고 한다. 리액트의 경우 components와 routes 폴더를 생성해서 필요한 요소들을 저장해두고 사용할 수 있다. index.js - index.js 는 A..
-
OPEN API 데이터 불러오기 ( fetch )React 2023. 3. 19. 20:23
fetch() : url을 입력하면 해당 데이터를 받아오는 함수로서, 인간인지 로봇인지 검사하지 않는 페이지라면 해당 함수로 정보를 받아올 수 있다 ( 검사하는 페이지라면 Selenium 등의 프로그램을 거쳐야한다 ) fetch("URL") - 기본적으로 해당 함수를 실행하면 여러가지 데이터들이 넘어온다 ( 기본적으로 페이지와 인터넷 연결이 잘 됬는지 확인하는 코드 ) 그래서 해당 페이지의 데이터를 취급하고 싶다면, response에서 json or xml을 추출해야한다 - 예제로 영화진흥위원회의 일별 박스오피스 정보를 가지고 와보자 useEffect(() => { -> 페이지가 로딩 되자마자 api 데이터를 가지고 오려면 useEffect()를 이용할 수 있다 fetch( `http://www.kobi..
-
nomad) react .map( )React 2023. 3. 17. 14:05
.map( ) : 이 메소드를 이용하면 배열에 들어있는 모든 요소들에 실행문을 할 수 있다 ( foreach 랑 비슷하다 ) toDos = [ 1, 2, werq, 523 ] 같은 배열이 있다고 보자 toDos.map( ) -> .map 메소드의 첫 번째 인수는 배열 내부의 값들이다. 배열 내부의 값들을 하나씩 가지고나온다 두 번째 인수는 배열 값의 index이다. 따라서 우리는 값과 순서를 알 수 있다. toDos.map( (item,index) => ( {item} ) ) -> li 를 생성한다 , 각 li는 toDos 배열의 값과 index를 내용과 키 값으로 받는다 ** 해당 함수에서 item 과 index의 이름은 사용자가 자유롭게 지정할 수 있다 ** react의 특성상 같은 component..
-
nomad) react useState( [] ) 활용React 2023. 3. 17. 11:59
todo 리스트를 만들 때 const [ toDo, setToDo ] = useState( "" ); const [ toDos, setToDos ] = useState( [] ); 로 선언할 경우 배열로 초기값이 지정된 toDos 에 값을 추가하고 싶다면, setToDos(currentArray => [ toDo, ...currentArray ]); 를 사용한다. -> ...currentArray는 현재 currentArray 내부에 있는 값들을 모두 출력하는 명령어로, 위의 상태에서는 toDos 배열에 저장된 모든 값들을 출력한다고 할 수 있다. 따라서 기존에 있던 toDos 배열에 toDo 값을 지정해서 다시 toDos 배열에 저장하고자 한다. - input에 넣고 submit 한 string이 to..