name https://images.velog.io/tags/React.png

# React

리액트(React)는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다. React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다.

8121개의 포스트

(React) 4. 복습

잠깐! 시작하기 전에 이 글은 wecode에서 실제 공부하고(이제 사전 스터디는 아닙니다.), 이해한 내용들을 적는 글입니다. 글의 표현과는 달리 어쩌면 실무와는 전혀 상관이 없는 글일 수 있습니다. 또한 해당 글은 다양한 자료들과 작성자 지식이 합성된 글입니다.

9분 전
·
0개의 댓글
post-thumbnail

[Flash LoL] 롤 전적 검색 사이트 개발기 - 2-1

이전 글 복기 Riot API를 호출하는 함수를 구현했습니다. 컨트롤러에서 서버에서 소환사명을 받고 각각의 Riot API 호출 함수를 활용하여 약간의 데이터 가공 처리 후 종합해서 json 데이터로 응답해 보내주도록 구현했습니다. >이젠 저희가 해야할 일은 클라이언

약 2시간 전
·
0개의 댓글
post-thumbnail

커스텀 Hooks 사용하기

커스텀 Hooks란? React를 사용하면서 컴포넌트를 만들다보면 Login Form과 같이 자꾸 반복되는 로직이 생길 수 있다. 이 때 커스텀 Hooks를 사용하면 중복되는 로직을 Hooks로 묶어서 코드를 효율적으로 관리할 수 있다. 참고로 커스텀 Hooks의 이름

약 2시간 전
·
0개의 댓글

[React] YouTube Clone Week2

YouTube 클론코딩 - 2주차

약 3시간 전
·
0개의 댓글

리액트를 다루는 기술 ( 버 사이드 렌더링 ) - 2

데이터 로딩은 서버 사이드 렌더링을 구현할 때 해결하기 매우 까다로운 문제 중 하나이다.데이터 로딩을 한다는 것 : API 요청을 의미예 ) 페이지에서 필요로 하는 데이터가 있다면 API를 요청해서 응답을 받아 와야 함. 일반적인 브라우저 환경에서는 API를 요청하고

약 3시간 전
·
0개의 댓글

Typescript Toy Project #1

Temp

약 3시간 전
·
0개의 댓글

JSX 문법 정리

두개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져 있어야 한다.var쓰지마const한번 선언 후 고정적인 값let유동적인 값

약 4시간 전
·
0개의 댓글

스파르타 코딩클럽 - 리액트 3주차(11)

1-1. 버킷 리스트 상세에서 삭제 버튼을 추가하고 리덕스에서 빼보자.Detail.jsBucketList.jsApp.jsbucket.js

약 7시간 전
·
0개의 댓글

useHistory hooc 사용

yarn add react-router-domoripm install react-router-domuseHistory 사용법출처 https://velog.io/@yiyb0603/React-Router-dom%EC%9D%98-%EC%9C%A0%EC%9A%A9%E

약 7시간 전
·
0개의 댓글

React - State

자세한 코드 보기 State 란컴포넌트 내부의 상태 관리 데이터데이터의 형식은 상관 없다.상태의 변경은 UI를 다시 랜더링 하게 한다.클래스 컴포넌트에서는 contructor에서 default 값 세팅으로 생성한다.함수 컴포넌트에서는 useState라는 후크 함수를

약 10시간 전
·
0개의 댓글

함수) Math.min/Math.max

Math.min() 함수는 주어진 숫자들 중 가장 작은 값을 반환합니다.이 때 min() 함수는 Math 의 정적 메소드이므로, 사용자가 생성한 Math 객체의 메소드로 호출하는 것이 아닌 항상 Math.min() 으로 호출되어야 합니다. (Math 는 생성자가 아닙니

약 10시간 전
·
0개의 댓글

스파르타 코딩클럽 - 리액트 3주차(10)

1-1. 컴포넌트에서 리덕스 액션 사용하는 법!클래스형 컴포넌트에서 리덕스 데이터 사용하기!(1). 리덕스 모듈과 connect 함수를 불러온다.(2). 상태값을 가져오는 함수와 액션 생성 함수를 부르는 함수를 만들어준다.(3). connect로 컴포넌트와 스토어를 엮

약 10시간 전
·
0개의 댓글
post-thumbnail

React-Event (feat. State & Scroll Event)

자세한 코드 보기 함수는 함수를 호출하는 주체가 this가 되며, 클래스는 객체를 가리킨다.함수에서의 this는 콜하는 주체에 따라 달라지므로 사용에 주의해야하며 this는 클래스 컴포넌트에서 더욱 많이 사용된다.state가 변경되면 reder가 실행이 된다. ren

약 12시간 전
·
0개의 댓글

AWS EC2 React Koa Node MongoDB ubuntu

putty 접속 후ubuntu 로그인sudo apt-get updatesudo apt-get upgrade -ysudo apt updatesudo apt upgrade -y(keep the local version currently installed 선택)git --v

약 19시간 전
·
0개의 댓글
post-thumbnail

21.07.27 API 연결해보기

API(Application Programming Interface 애플리케이션 프로그래밍 인터페이스내 프론트 웹이랑 백엔드분들이 만들어준 서버랑 연결하는걸 했다사실 어제부터 했다코딩코딱지 김정후라서 헤맸다😵우선 최종프로젝트인 유학/교환학생 갤러리 웹에서 게시글 목록

약 20시간 전
·
0개의 댓글
post-thumbnail

[react] useContext

useContext를 사용하기 위해선 3가지 단계가 있다.Context의 이름 컨벤션은 {name}Context이다. Component로 사용하므로, Pascal Case로 만들어준다.생성한 Context의 Provider로 children을 감싸준다. value에는

약 20시간 전
·
0개의 댓글
post-thumbnail

[React] 리액트를 다루는 기술 - 4장 이벤트 핸들링 정리

사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 것을 이벤트라고 한다. 예를 들어 버튼에 커서를 올렸을 때는 onmouseover 이벤트, 클릭했을 때는 onclick, 폼 요소는 값일 바뀔 때 onchange 이벤트를 실행한다. 이벤트 종류는 여기(https&#

약 22시간 전
·
0개의 댓글
post-thumbnail

리액트 기초 개념 - 컴포넌트, JSX , props

React에서 가장 많이 등장하는 3가지를 공부해보았다.

약 22시간 전
·
0개의 댓글

리액트 기초

왜 리액트를 쓰는가?사용자 경험이 좋다.앱과 같은 자연스러운 자연스러운 인터페이스데이터랑 화면의 일치가 쉽다.데이터 처리가 용이하다.중복을 피할 수 있다.동일한 컴포넌트(조각)을 일제히 수정 가능하다.리액트는 자바스크립트를 사용한다.npx create-react-ap

약 23시간 전
·
0개의 댓글
post-thumbnail

React: state

컴포넌트에서 유동적인 데이터를 처리할 때 사용초기값 설정이 필수 -> 생성자 내부에서 this.state = {state이름: 값} 으로 설정JSX 내부에서 {this.state.state이름} 값을 수정할 때는 setState({state이름: 값})으로 변경, co

약 23시간 전
·
0개의 댓글