일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- 컴퓨터 네트워크
- 자바
- NextJS
- react hook
- 백준
- 프로그래머스
- JavaScript
- 리액트 훅
- Java
- 자바스크립트
- 프로그래머스 자바
- react
- 코딩테스트 고득점 Kit
- 디자인 패턴
- 코딩테스트 고득점 Kit 완전탐색
- websocket
- 리액트
- 프로그래머스 완전탐색
- React JS
- react firebase
- vanillaJS
- 프로그래밍 언어론
- useState
- design pattern
- 장고
- 자바 공부
- useEffect
- 코틀린
- codesandbox
- 데이터모델링과마이닝
- Today
- Total
목록react (36)
기록하는 개발자
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bHXd9k/btrgh2pnYOy/ZYWJsh0zibQFHKk4eSmrM1/img.png)
https://ko.reactjs.org/docs/hooks-intro.html Hook의 개요 – React A JavaScript library for building user interfaces ko.reactjs.org Hooks 는 리액트 v16.8 에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 랜더링 직후 작업을 설정하는 useEffect 등의 기능 등을 제공하여 기존의 함수형 컴포넌트에서는 할 수 없었던 다양한 작업을 할 수 있게 해준다. → class를 사용하지 않고도 함수형 프로그래밍을 가능하게 해준다. - this 등과 같은 문장 규칙과 render 등을 고려해야한다. exp..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/s1GjN/btrfO4UGPPX/5x2K9EgMmvGhowQK7eYxy1/img.png)
구현할 화면 1. axios로 api의 json을 가져오는 동안 "loading..." 이라는 문구를 띄워준다. 2. json data를 모두 가져오면 영화 목록을 보여준다. import React from "react"; import axios from "axios"; import Movie from "./Movie"; import "./App.css"; class App extends React.Component { state={ isLoading : true, movies:[] }; /*axios는 항상 빠르진 않아서 js에게 componentDidMount 함수가 끝날 때까지 약간 시간이 걸릴 수 있다고 전달해야한다. 이에 getMovies 비동기 함수를 만들어 axios.ge..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/c23vNW/btrfIYlWVHy/mwycS9BvhxxRqH9hwdEKJ1/img.png)
component : html을 return하는 함수 react는 component를 사용하여 html처럼 작성하려는 경우에 필요하며, js와 html간의 조합을 jsx 라고 부른다. import React from "react"; import AppNamefrom "./AppName"; function App(){ return ( Hello! ); } export default App; 1. component를 작성할 때마다 React를 import해줘야한다. 그렇지 않으면 react는 jsx가 있는 component의 사용을 이해하지 못한다. → import React from "react"; 2. component 이름은 대문자로 시작해야한다. → appName(x) AppName(o) 3. ind..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/ADobJ/btrfuLHaWd7/f6F6XtAf9kA7Kmhx6Cloc1/img.png)
react 사용에 필요한 것 - nodeJS, npm, npx, git, code editor - nodeJS 설치 시 npm이 함께 설치된다. (yarn과 npm은 동일한 역할을 수행한다.) - 원하는 code editor 사용 ex) VSCode, Sublime Text, Brackets, Atom, Vim etc.. react를 배우기 전 기본적으로 알아야 할 것 - html, css, vanillaJS 1. npx install > npm install npx -g 2. create app > npx create-react-app ex) npx create-react-app myapp 3. app 실행 > cd myapp > npm start import React from "..