본문 바로가기

분류 전체보기344

[REACT] Ajax로 외부 데이터 통신하기 Ajax 란? AJAX ( Asynchronous Javascript and XML) 은 웹 페이지의 이동없이 필요한 데이터만 전송하는 기술이다,웹 어플리케이션에서 데이터를 가져올 때 서버쪽 데이터가 필요할 때 ajax기법을 사용하게 된다.이 작업은 시간이 오래 걸릴 수도 있기 때문에 비동기적으로 처리하게 된다,비동기(asynchronous)는 요청이 끝날 때 까지 기다리는 것이 아니라, 동시에 여러 작업을 수행하게 된다.react에서는 다른 서버의 REST API와 통신을 이용하여 데이터베이스 데이터를 가져올 수 있다.ES6의 fetch를 이용한 리액트 데이터 처리Promise = fetch(요청주소)1. 이벤트 클릭시 처리하기 데이터를 가져와서 useState()에 저장하는 작업이다.극단적으로 표현해.. 2024. 5. 14.
[REACT] React 라우터 [REACT] React에 CSS 적용하기[REACT] 훅. Hook[REACT] 컴포넌트 반복[REACT] React Event[REACT] STATE[REACT] 컴포넌트(Components)와 Props[REACT] 코드 살펴보기[REACT] REACT 란REACT리액트는 자바스크립트 라이브러리이다. 구조가 MVC, MVVM과 같은 다hong-study.tistory.comSPA ( Single Page Application ) 이란?하나의 페이지로 만들어진 애플리케이션을 의미한다.전통적인 웹 애플리케이션 vs SPASPA는 html 파일을 브라우저 측에서 로드, 필요한 데이터는 API와 Ajax 통신을 이용해 처리한다.브라우저에서 사용자가 상호작용하면 필요한 부분만 업데이트해서 처리멀티플랫폼 An.. 2024. 5. 14.
[REACT] React에 CSS 적용하기 [REACT] 훅. Hook[REACT] 컴포넌트 반복[REACT] React Event[REACT] STATE[REACT] 컴포넌트(Components)와 Props[REACT] 코드 살펴보기[REACT] REACT 란REACT리액트는 자바스크립트 라이브러리이다. 구조가 MVC, MVVM과 같은 다른 프레임워크hong-study.tistory.comReact 스타일링태그에 직접 지정하기일반 css 파일로 적용하기css 모듈로 적용하기public 폴더에 css 디자인css 파일 이름 규칙컴포넌트의 이름을 반드시 포함해서 만든다.예를 들면App.js 일 경우의 css 는 App.css 로 만든다.1. 태그에 직접 지정하기태그에 직접 디자인을 적용할 때는 { }로 묶어준다.CSS 속성 중 - 은 카멜표기법으.. 2024. 5. 14.
[REACT] 훅. Hook [REACT] 컴포넌트 반복[REACT] React Event[REACT] STATE[REACT] 컴포넌트(Components)와 Props[REACT] 코드 살펴보기[REACT] REACT 란REACT리액트는 자바스크립트 라이브러리이다. 구조가 MVC, MVVM과 같은 다른 프레임워크등과는 다르게 오직hong-study.tistory.com훅(Hook) 이란?리액트 컴포넌트는 클래스형 컴포넌트(Class component)와 함수형 컴포넌트(Functional component)로 나뉜다.리액트 훅은 새로운 기능으로 React 16.8버전에 새로 추가된 기능이다. 함수형태의 컴포넌트에서 사용되는 몇가지 기술을 Hook이라고 부릅니다. (useState, userEffect 등)리액트 훅은 함수형 컴포넌.. 2024. 5. 14.
[REACT] 컴포넌트 반복 [REACT] React Event[REACT] STATE[REACT] 컴포넌트(Components)와 Props[REACT] 코드 살펴보기[REACT] REACT 란REACT리액트는 자바스크립트 라이브러리이다. 구조가 MVC, MVVM과 같은 다른 프레임워크등과는 다르게 오직 View만 처리하hong-study.tistory.com 컴포넌트 반복목록 요소들을 반복처리 할 때는 MAP함수를 이용한다.반복 컴포넌트에는 반드시 Key Props를 전달해야 한다.※ map -  실행한 결과를 가지고 새로운 배열을 만들 때 사용array.map(callbackFunction(currentValue, index, array), thisArg)currenValue : 현재 값index : 현재 인덱스array : .. 2024. 5. 14.
[REACT] React Event [REACT] STATE[REACT] 컴포넌트(Components)와 Props[REACT] 코드 살펴보기[REACT] REACT 란REACT리액트는 자바스크립트 라이브러리이다. 구조가 MVC, MVVM과 같은 다른 프레임워크등과는 다르게 오직 View만 처리하는 라이브hong-study.tistory.comReact Event이벤트 규칙이벤트의 이름은 전부 카멜 표기법으로 표현된다. onkeyup → onKeyUp이벤트를 전달할 때는 { 함수 } 형태로 사용한다.Input 값 핸드링 하기Input의 값이 변화되는 이벤트 onChange 연결이벤트 내부 첫 번째 매개변수에서 event 객체 활용하기e.target.속성값setter를 이용해 state 변경value 속성을 이용해 state 동기화 처리va.. 2024. 5. 14.
[REACT] STATE [REACT] 컴포넌트(Components)와 Props[REACT] 코드 살펴보기[REACT] REACT 란REACT리액트는 자바스크립트 라이브러리이다. 구조가 MVC, MVVM과 같은 다른 프레임워크등과는 다르게 오직 View만 처리하는 라이브러리이다.SPA란Single Page Applicationhong-study.tistory.comSTATE 란1. 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.2. state 가 체인지가 되면 변화를 감지하여 리렌더링을 수행한다.3. 클래스와 함수형 컴포넌트의 사용 방법은 각 각 다르다.4. 함수형 컴포넌트에서는 훅(Hook) 개념을 이용해서 더욱 쉽게 사용 가능하다.useStateuseState는 배열 반환 함수이다.첫 번째 배열의 요.. 2024. 5. 14.
[REACT] 컴포넌트(Components)와 Props [REACT] 코드 살펴보기[REACT] REACT 란REACT리액트는 자바스크립트 라이브러리이다. 구조가 MVC, MVVM과 같은 다른 프레임워크등과는 다르게 오직 View만 처리하는 라이브러리이다.SPA란Single Page Application의 줄임말index.html하hong-study.tistory.comComponents ( 컴포넌트 )위 사진은 리액트의 컴포넌트의 형태로, Tree 구조를 띄고있다.컴포넌트는 함수형, 클래스형으로 총 2가지로 구성되어 있다.함수형function Welcome(props) { return Hello, {props.name};}클래스형class Welcome extends React.Component { render() { return Hello, {t.. 2024. 5. 6.
[REACT] 코드 살펴보기 [REACT] REACT 란REACT리액트는 자바스크립트 라이브러리이다. 구조가 MVC, MVVM과 같은 다른 프레임워크등과는 다르게 오직 View만 처리하는 라이브러리이다.SPA란Single Page Application의 줄임말index.html하나만 로드하고hong-study.tistory.com코드 살펴보기index.jsconst root = ReactDOM.createRoot(document.getElementById('root'));root.render( );React.StricMode : 옛날 기능을 사용할때 경고를 출력하는 기능  root의 render함수는 App컴포넌트를 화면에 그리는 기능 App.jsimport React from 'react';import logo fro.. 2024. 5. 6.
[REACT] REACT 란 REACT리액트는 자바스크립트 라이브러리이다. 구조가 MVC, MVVM과 같은 다른 프레임워크등과는 다르게 오직 View만 처리하는 라이브러리이다.SPA란Single Page Application의 줄임말index.html하나만 로드하고 실행시키는 구조이다.어떻게?번들러(Webpack)가 이 모든것을 해결한다.Webpack이란 어플리케이션을 동작시키는데 필요한 자원(JS파일들, CSS, Image 등)을 하나로 묶어서 조합하여 경량화 하여 결과물을 만들어 주는 도구이다.번들러는 node.JS를 통해 직접 설정 할 수 있지만, 리액트 프로젝트를 생성시 자동으로 포함된다.DOM ( Document Object Model )HTML을 이해하기 쉽도록 트리 구조로 만들어진 태그(객체)들이다. 리액트의 Virtu.. 2024. 5. 6.
반응형

티스토리툴바