본문 바로가기

전체 글

 (231)
fetch 란? fetch 란? fetch 매서드는 JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 매서드이다. XMLHttpRequest와 비슷하지만 fetch는 Promise를 기반으로 구성되어 있어서 더 간편하게 사용할 수 있다는 차이점이 있다. 기본 구조 fetch(url) .then(res => { console.log(res) }) .catch(error => { console.log(error) }) 기본적인 구조와 동작은 Promise 객체와 동일하다. 파라미터로 요청을 보낼 url을 입력해 주고 응답을 받아서 추가적인 작업 또한 해줄 수 있다. then에서 응답 객체 res를 받고, catch에서 에러 요청이 발생했을 때, 에러를 받는다. 요청 정보 파라미터 fetch..
props란? props 는 컴포넌트에서 사용 할 데이터 중 변동되지 않는 데이터를 다룰 때 사용됩니다. parent 컴포넌트에서 child 컴포넌트로 데이터를 전할 때, props 가 사용됩니다. 예제를 통하여 이에 대하여 알아보겠습니다. props 추가하기 컴포넌트에서 immutable (변하지 않는) 데이터가 필요 할 땐, render() 메소드의 내부에 안에 { this.props.propsName } 형식으로 넣고, 컴포넌트를 사용 할 때, 괄호 안에 propsName="value" 를 넣어 값을 설정합니다. Header 컴포넌트와 Content 컴포넌트가 props를 사용하도록 업데이트 해보겠습니다. Header.js import React from 'react'; class Header extend..
JSX란? 쉽게 말해 HTML 문법을 JavaScript 코드 내부에 쓴 것. 그것이 바로 JSX다! 어렵게 말해 JavaScript eXtension.. JavaScript의 확장 버전이고 결론은 자바스크립트이다. "React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다." (나무위키曰) 즉, JSX는 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법으로, 리액트 개발에 엄청난 도움을 주고 있다. 다음의 예제를 보자. HTML이 .js의 변수에 저장되어 있다. 변수에..
Rendering이란? html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering) 이라고 말합니다. 엘리먼트는 React의 가장 작은 단위입니다. 엘러먼트는 화면에 표시할 내용을 담고 있습니다. 브라우저 DOM 엘리먼트와는 다르게 React 엘리먼트는 일반 객체이며 쉽게 생성할 수 있습니다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트합니다. (공식문서) React 요소가 DOM node에 추가되어 화면에 렌더되려면 ReactDOM.render 함수를 사용합니다. 첫 번째 인자에는 JSX로 React 요소를 인자로 넘기고, 두 번째 인자는 해당 요소를 렌더하고 싶은 container(부모요소)를 전달합니다. 위의 그림을 보면 전체 H..
React 강의 by 동빈나 https://youtu.be/s2knmog2j1U?list=PLRx0vPvlEmdCED62ZIWCbI-6G_jcwmuFB
영화 API Key 받기 https://www.themoviedb.org/ The Movie Database (TMDb) Welcome. Millions of movies, TV shows and people to discover. Explore now. www.themoviedb.org 회원가입 후 로그인 프로필 -> 세팅 -> API클릭 -> API Key 클릭 Developer 클릭 -> 약관동의서 Accept API form 작성 -> 완료
React Hooks란? React Hooks React Hooks은 리액트의 새로운 기능으로 React 16.8버전에 새로 추가된 기능으로 state, component에 대한 것들을 바꿔놓았다. 예를 들면 function component에서 state을 가질 수 있게 된 것 만일 앱을 react hook을 사용하여 만든다면 class component, render 등을 안해도 된다는 뜻이다. 모든 것은 하나의 function이 되는 것 함수형 프로그래밍이 가능해지는 것 React Hokks를 사용 했을 때와 안했을 때의 차이를 간단한 예제로 살펴보도록 하겠습니다. class component import React, { Component } from 'react'; class App extends Component { s..
the valhalla murders https://youtu.be/pQyy7DJtwEI The Valhalla Murders (Icelandic: Brot, literally "violation") is an eight-episode police procedural television series produced in Iceland, originally airing there in 2019, then released worldwide in 2020 on Netflix and airing for free on BBC Four in the UK. This is the second Icelandic series to be featured on Netflix, Trapped (Ófærð) being the first one. It is based..

티스토리툴바