chez Manon

https://formik.org/ Formik React hooks and components for hassle-free form validation. The world's leading companies use Formik to build forms and surveys in React and React Native. formik.org Formik ? Formik is the world's most popular open source form library for React and React Native. > 회원가입같이 데이터를 입력해서 서버에 보내는 페이지를 react로 구현하다보면 state, eventhandler, validate 등의 여러 코드들이 많이 발생한다. 이런 form 형태의 ..

Ajax - Axios library : 브라우저, Node.js를 위한 promise API를 활용하는 HTTP 비동기 통신 라이브러리 > axios setting yarn add axios npm install axios GET / POST GET : 서버에서 데이터를 받아온다. axios.get('get요청할url') .then (( ) => { 요청 성공시 실행코드 }) .catch ( ( ) => {요청 실패시 실행코드 }) > then 콜백함수 안에 파라미터를 추가하면 그게 받아온 데이터이다. { axios.get("https://codingapple1.github.io/shop/data22.json") .then((result) => { console.log(result.data)}) .c..

useEffect / useReducer [ 기초 지식 ] component는 lifecycle이 존재 컴포넌트도 인생이 있다. 1. mount (생성, 처음 나타났을 때) : props로 받는 값을 컴포넌트의 로컬 상태로 설정할 때 / 외부 API요청 (REST API 등, 라이브러리 사용 setInterval을 통한 반복작업 혹은 setTImeout 통한 작업 예약 2. unmount (사라질 때) : setInterval로 등록한 작업을 clear하기 (clearInterval, clearTimeout), 라이브러리 인스턴스 제거 3. re-rendering (업데이트, 관련된 state가 변경되면 재렌더링) > component의 인생의 중간중간 hook을 걸 수 있다. (인생에 참견한다) 이를 ..

React에서의 스타일링 - css - css.module - styled component - scss styled-component 🔻사용이유 컴포넌트가 많은 경우 스타일링에 불편함이 발생한다. 1. class 중복으로 생성한다. 2. 다른 컴포넌트에 원하지않는 스타일이 적용된다. 3. css파일이 너무 길어져서 수정이 어렵다. > 컴포넌트 제작 시 styled-components라는 라이브러리를 이용하여 js파일에서 스타일을 바로 입힌다. 컴포넌트마다 고유한 클래스를 가진다. 🔻 설치 yarn add styled-components npm install styled-components //1.import 한다. import styled from "styled-components"; //2.style..

React Router? SPA의 routing문제를 해결하기 위해 사용되는 네비게이션 라이브러리이다. React Router를 사용하면 앱에서 발생하는 라우팅이 location이나 history와 같은 브라우저 내장 api와 완벽하게 연동이 된다. > setting npm install react-router-dom vs : HashRoutersms URL 맨뒤에 /#/이 붙은채로 시작한다. 왜? 원래 브라우저 주소창에 페이지 입력하면 서버한테 특정 페이지좀 보여달라는 요청이다. 근데 우리는 서버없고 그냥 리액트가 라우팅을 담당하고 있으므로, 존재않는 페이지 서버한테 요청해서 에러뜰 수 있다. 안전빵으로 # 붙여준다. #뒤에 붙은것들은 서버로 요청안되니까! //index.js import { Brows..

Data binding JSX에서 데이터바인딩하기 데이터 바인딩? 자바스크립트 데이터를 HTML에 꽂아넣는 작업을 뜻한다. > 변수를 만들어서 넣기 { } 중괄호에 넣어서 온갖곳에 변수 집어넣기 가능하다. import React, { useState } from "react"; let data = "안녕"; function app() { return ( {data} ); } export default app; > html에 스타일 직접 넣기 { } 중괄호에 넣어서 { 속성명 : '속성값'} 속성명은 camelcase로 입력해야된다. {data} 보기싫으니까 변수명에 넣어서 사용하거나 css파일에서 하도록 하자. let data = { color : 'red'} State / useState 중요한 데이터..

State ? 🔻 State란 : 컴포넌트 내부에서 가지고있는, 객체형태의 컴포넌트의 상태값이며 함수내에 선언된 변수처럼 컴포넌트 내에서 정의하고 사용하며 변경까지시킬 수 있는 객체. (state는 object이고 compo의 data를 넣을 공간이 있고, 이 데이터는 변함) - State가 필요한 이유 : 컴포넌트안의 요소에서 그 상태값반영해서 데이터가 바뀔때마다 효율적으로 화면(UI)에 나타내기 위해서 필요. - State와 Props의 차이 : 두객체 모두 렌더링 결과물에 영향을 주는 정보(컴포넌트의 속성값)를 가짐. props : (함수의 매개변수처럼) 부모로부터 props를 받고, 이 props는 상속받은 컴포넌트 내에서 수정 불가능(읽기전용) state : (함수내에 선언된 변수처럼) 컴포넌..

Rendering : 코드가 눈으로 볼 수 있도록 그려지는 것 ReactDom.render 함수 사용 > react요소가 DOM node에 추가되어 화면에 렌더됨 첫 번째 인자 JSX로 react요소 인자로 넘김 두 번째 인자는 해당 요소를 렌더하고 싶은 부모요소 전달 ReactDOM.render( Hello, world!, document.getElementById('root') ); React element : 리액트로 화면을 그려내는데 가장 기본적인 요소 JSX 문법으로 작성한 요소는 자바스크립트 객체가 됨 = 리엑트 엘리먼트 > ReactDOM.render 함수의 argument로 전달하게 되면, 리엑트가 객체 형태의 값을 해석해서 HTML형태로 브라우저에 띄움 React component : r..

JSX JavaScript eXtension javascript의 확장문법. javascript에서 html과 같은 문법을 사용. JSX ? React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 markup언어를 리터럴로 입력한는 것으로 보이는데, 빌드시 Babel에 의해 javascript로 변환된다. Hello World! //babel이 javascript로 변환 "use strict"; React.createElement("div", null, React.createElement("b", null,"Hello"), "World!"); ✔️ JSX에서는 하나의 root 레벨 요소가 있어야한다. ? 자바스크립트는 하나 이상을 return 할 수 없기때문에 JSX 규칙 (Babe..

React 🔻 사용자 인터페이스(UI)를 만들기 위한 Javascript 라이브러리 ✔️ 사용이유? UI를 자동으로 업데이트 해줌 ( 가상 돔 virtual Dom을 통해 UI를 빠르게 업데이트) virtual Dom : 이전 UI상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산 ( 불필요한 UI업데이트 줌, 성능향상) ✔️ 작업환경 Node. js : js가 브라우저 밖에서도 동작하게 하는 환경 npm : 다양한 패키지를 설치하고 버전을 관리할 수 있음 React Native : 웹> 앱 / 안드로이드 & ios동시에 가능 React VS React.DOM react : component를 생성하고 관리 react.DOM : component를 가져와 DOM에 rendering하는 librar..