React
-
React - map() 활용React/기본 2020. 5. 24. 23:01
아래 나열된 순서대로 진행해 주세요. 1. API 주소를 호출하여 데이터 로딩을 처리해주세요! - componentDidMount() - fetch - setState (monsters에 저장) 2. SearchBox 컴포넌트에 정의한 handleChange 메서드를 넘겨주고, 호출 시 인자로 들어오는 이벤트객체(e)를 활용해 userInput으로 setState. App.js 1. App.js에서 API 호출 호출할 API 주소 : https://jsonplaceholder.typicode.com/users 위 주소를 호출하여 데이터 로딩을 처리하기 리액트에서 데이터 로딩을 할때, 필요한 메서드가 존재한다. 그것은 바로 fetch()라는 메서드이다. 그렇다면 fetch()의 적절한 위치는 어디인가? 바..
-
React - request/response 이해하기React/기본 2020. 5. 24. 10:00
소스로 이해하기 1. fetch()의 첫 번째 인자는 백앤드에서 만든 API와 연결하는 것을 의미한다. 2. 두번째 인자로는 요청하는 값을 의미한다. - method는 보내는 방식을 의미한다. ex) POST / GET - header는 해당 request에 대한 추가 정보(addtional information)를 담고 있는 부분이며, 설명 같은 내용이 들어있는 메타 데이터라고 보면 된다. HTTP Header에 쓰이는 Content-Type이란 무엇일까? request에 실어 보내는 데이터(body)의 type의 정보를 표현한다. ex) text/css, text/javascript, text/html, text/plain Content Type은 Request에 실어 보내는 data의 type에 따..
-
React - 메인 페이지 기능 구현React/기본 2020. 5. 20. 10:00
Assignment 메인 페이지 - 사용자가 댓글 입력 후 Enter를 누르거나 왼쪽의 버튼 클릭 시 댓글이 추가되도록 구현해주세요. 피드 컴포넌트는 인스타그램에서 피드에 해당하는 부분이다. 바로 이 부분이다. Feed.js 댓글 구현할 부분은 이 부분이다. Comment.js 먼저 사용자가 먼저 댓글을 입력했을 때를 생각해보자. 일단 state안에 commentList: [], commentText: "", userId: "ljtaek2"ljtaek2"라는 값을 미리 초기화를 시켰다. input 태그에 무언가를 입력하는 순간 onChange 이벤트 핸들러가 실행되고, commentState라는 함수가 실행된다. commentState 함수 안에서 event를 이용해서 해당 input값을 setState..
-
React - 로그인 페이지 기능 구현React/기본 2020. 5. 19. 10:00
로그인 페이지의 기능을 구현해보자! Login.js 1. import React from "react"; : react 라이브러리에서 react의 함수나 클래스들을 가져와서 그 기능을 사용하려고 하는 구문이라고 보면 된다. import { withRouter } from "react-router-dom"; : "react-router-dom"은 DOM에 접근하고 DOM이 인식할 수 있는 컴포넌트들만 뺀 라이브러리이다. "react-router-dom" 안에 있는 withRouter라는 2. class Login extends React.Component { render(){ return(); } } export default withRouter(Login); : class형 컴포넌트를 만드는 형식이다. ..
-
React - React의 탄생React/기본 2020. 5. 17. 12:00
React의 탄생 React가 생기기 전에 순수 자바스크립트를 통해 브라우저를 관리해왔다. 하지만, 순수 자바스크립트만으로는 대규모의 웹 프로젝트를 관리하기가 어렵고, 성능도 많이 떨어졌다. 이러한 문제들을 해결하기 위해 시간이 지나고 수많은 라이브러리(ex. React)와 프레임워크(ex. Angular, Vue.js)들이 나오기 시작했다. 그중 우리가 공부할 리액트는 페이스북 개발 팀에서 개발한 것이며, 최대한 성능을 아끼고 편안한 사용자 경험을 제공하면서 구현하고자 만들어졌다고 한다. React와 다른 프레임워크의 차이 먼저, React와는 달리 Angular, Vue.js와 같은 프레임워크는 보통 MVC, MVW 아키텍처로 애플리케이션을 구조화한다. 이러한 구조들의 공통점은 모델(Model)과 뷰..
-
React - React의 routerReact/기본 2020. 5. 15. 12:00
Routing란? 간단히 말하면, 경로 이동 혹은 페이지 이동이라고 생각하면 된다. 예를 들어 사용자가 로그인을 위해 /Login에 접근했을 때, react-router는 로그인 페이지를 렌더링 해준다. 하지만, Create React App(CRA)에 특별히 routing(경로 이동)을 위한 로직이 들어있지 않기 때문에 따로 설치해서 사용해야 한다. 왜냐하면, React는 프레임워크가 아니라 오로지 뷰로만 이루어진 라이브러리 이기 때문에, 필요한 기능들을 따로 설치해서 사용해야만 한다. reacttraining.com/react-router/web/guides/quick-start React Router: Declarative Routing for React Learn once, Route Anywhe..
-
React - Component의 StateReact/기본 2020. 5. 13. 22:12
state state란 말 그대로 컴포넌트의 상태 값을 의미한다. state와 props는 둘 다 Object이고, 화면에 보여줄 정보(상태)를 가지고 있다. 그런 점에서 서로 비슷한 역할을 한다. props는 컴포넌트를 사용하는 부모 쪽에서 전달해야만 사용할 수 있다. 마치 parameter(값)을 보내는 것과 같다. 반면, state는 컴포넌트 내에서 정의하고 사용한다. 특징 - state정의 할때, 반드시 constructor()함수를 호출하고 super()를 해줘야 사용 해야한다. - state 타입은 Object이고, 키와 값으로 이루어진 그 안에 배열, 객체와 같은 타입들을 다 담을 수 있다. ex) 이미지 리스트(배열) - 이벤트 발생 요소와 반영 되는 요소는 엄연히 다르다. 공부 할 예제를..
-
React - Component의 PropsReact/기본 2020. 5. 12. 14:40
Component란? - 재사용 가능한 UI 단위라 부른다. Component를 왜 사용해야 할까? 만약, '회원정보 페이지'와 '회원정보 수정 페이지' 두 개의 페이지를 만들어야 한다. Component를 모르면 회원정보 페이지의 html과 css를 작성하고, 회원정보 수정 페이지의 html과 css를 작성할 것이다. 이렇게 동일한 코드를 두 번 작업하는 것은 상당히 귀찮은 일이다. 이럴 때, 동일한 코드가 반복되는 부분을 하나의 Component로 만들어서 같은 디자인 input이 필요한 곳마다 재사용 한다면 귀찮은 작업을 피할 수 있게 된다. 그렇기 때문에 Component를 써야한다. Component의 특징 Component는 독립적으로, 재사용이 가능한 코드로 관리할 수 있다. 컴포넌트도 in..