컴포넌트13 Next에 Chakra 설치와 사용법 Next에 차크라 세팅 npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6 Next에 차크라 세팅 // pages/_app.js import { ChakraProvider } from '@chakra-ui/react' function MyApp({ Component, pageProps }) { return ( ) } export default MyApp 컴포넌트에 차크라 세팅 // pages/_app.js import { ChakraProvider } from '@chakra-ui/react' // 1. Import the extendTheme function import { extendTheme } from '@c.. 2022. 7. 31. [220429] useContext + ContextAPI 로 전역상태 관리하기 context란? React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법이다. 원래 리액트에서는 부모 컴포넌트에서 자식 컴포넌트에게 props로 값을 넘겨주는 방식으로 데이터를 공요할 수 있었다. useContext const value = useContext(MyContext); 만들 리액트 부모관계 구조도 천천히 어떤 순서로 이 구조를 만드는지 이해하는게 목표 Store/Context.jsx - export하는 방법에 따른 import하는 형태의 차이 // Context.jsx // ES6 모듈 export default Store //바로 사용가능 export const a = 10 //객체로 나감 // NodeJS 모듈 module.expor.. 2022. 5. 6. [220427] 코드의 분리 코드 분리 코드를 분리해 4월46일에 만든 로그인기능을 유지해보았다. 다른 컴포넌트처럼 import로 가져올 수 있고, export default로 내보낼 수 있다. // 내보낼때 export default useForm // 가져올때 import useForm from './useForm.jsx' 비동기 코드 넘기기 중간에 상태값이 바뀌어서 재실행될때 코드는 비동기적으로 움직인다. 올바르게 회원가입을 했을때 1초후에 가입한 정보를 띄우는 비동기적 코드를 작성해보았다. // 강제적으로 비동기 코드를 작성 // submit을 클릭했을때 items를 최신상태로 바꾸기 const request = async (items) => { const result = await new Promise((resolve,re.. 2022. 5. 4. [220426] 회원가입창 만들기 / useEffect React의 목적 리액트는 UI를 렌더링하는 것이 목적이다. 또한 사용자의 입력에 반응하여 필요할때 UI를 다시 렌더링하는것이다. 일반적인 컴포넌트 함수들이 이에 해당하며 리액트에 의해 재실행된다. useEffect의 목적 화면에 무언가를 그리는 것애 관한 직접적인 행동들이 아닌것들을 Side Effect라고한다. Hook 속해있는 함수이며 보통 이펙트라고 한다. useEffect는 이런 이펙트 들을 처리하는것이 목표이다. (http 리퀘스트 등등..) useEffect의 구조 loop(무한반복)이 되기 쉽기때문에 return() 바깥쪽에 위치한다. useEffect( ()=>{}, [] ); useEffect의 첫번째 인자는 함수형태이며, 모든 컴포넌트 실행이 끝난 후 실행이 된다. (코드를 위에서부.. 2022. 5. 3. [220425] 함수컴포넌트로 로그인기능 생성, props 값 넘기기 클릭시 비활성화되고, 1초 후 활성화되는 버튼 만들기 import React,{useState} from 'react' //함수형 컴포넌트니까 this를 사용하지 못하니까 useState로 state를 만든다 //한번에 두가지 값 처리를 위해서 객체로 넣는다 const [values,setValues] = useState({email:'',password:''}) //초기값 넣기 const [submit,setSubmit] = useState(false) //버튼클릭유뮤를 담는 변수 const Login = () => { const {name, value} = e.target const handleChange = (e) => { console.log(e.target.name, e.target.values.. 2022. 5. 2. [220425] 함수형 컴포넌트, Hook, useState, useEffect 단번에 리액트 시작하기 //function은 임의로 정한 디렉토리명 $ npx create-react-app function $ cd function $ npm run start 자바스크립트와 리액트의 함수 //자바스크립트식 function a(){ console.log('hello world') } a() //리액트식 function A(){ return Hello world } 객체를 만드는 리액트 //JSX ->(babel)-> Javascript //클래스 문법, 객체를 만듬 //컴포넌트의 목적은 객체라고도 할 수 있다 class App extends React.Component{ render(){ return( 버튼1 버튼2 ) } } //이런식으로 객체 만듬 { type:'span', prop.. 2022. 5. 1. [220420] 리액트로 구구단 만들기 자바스크립트로는 만들어봤지만 리액트로는 처음 만들어보는 구구단! 기초세팅 구구단을 만들 GuguClass.jsx //GuguClass.jsx import React, {Component} from 'react' class GuguClass extends Component{ render(){ return( Hello World! ) } } export default GuguClass GuguClass.jsx를 가져와서 실행할 App.jsx //GuguClass.jsx를 가져와서 실행할 App.jsx import React, {Component} from 'react' import GuguClass from './components/GuguClass' class App extends Component{ re.. 2022. 4. 25. [220420] 리액트에서 css 사용하기 webpack에서 css를 사용하기 원래는 사용 못한다. 왜냐, webpack을 사용하는것은 node.js환경이라는 말과 같기때문. 하지만 import되는 파일은 웹팩이 알아서 번들을 만들고 있으니까 css파일도 import해서 번들을 해주면 어떨까 이걸 위해서 다음 라이브러리를 설치해준다. $ npm install -D mini-css-extract-plugin css-loader webpack.confing.js에 다음 코드 작성 string 형태인 백틱(``)안의 내용을 구분하기위해 vscode-styled-components를 설치했다. const MiniCssExtractPlugin = require('mini-css-extract-plugin') ... module:{ rules:[ {...}.. 2022. 4. 25. [220403] 클래스 정리 똑같은거 계속 작성해서 만들기 귀찮아! 라는 의도로 사용하고있는 함수. 그와 마찬가지로 같은 내용의 객체를 계속 선언하기 귀찮아!라는 명목으로 만들어진 객체전용함수가 클래스. (함수와 클래스 둘다 typeof로 확인해보면 function 이라고 결과가 나오기때문) 클래스를 만드는 방법 클래스는 앞에 function 대신 class로 선언한다. 클래스명은 앞자리가 대문자다. 클래스 생성자 메서드인 constructor를 통해 초기값을 만들 수 있다. 초기값을 불러와서 사용할때는 new를 사용해서 생성한다. new Ingoo('aaaa')를 호출하면 생기는 일 1. 새로운 객체가 생성된다 2. 넘겨받은 인수 'aaaa'와 함께 contructor가 자동으로 실행된다. class Ingoo{ //Ingoo라는.. 2022. 4. 22. [220419] 최소기능으로 리액트 시작하기 / 세부설정하기 '최소기능'으로 리액트 초기설정하기 리액트를 시작하기 위해서는 총 4가지가 필요하다 1. react 2. react-dom 3. babel 4. webpack $ npm install react react-dom $ npm install -D webpack webpack-cli $ mkdir dist src webpack.config.js, index.html 생성 src디렉토리 안에 index.jsx 생성 -> 리액트 문법을 위한 파일 index.jsx에 hello world을 입력해서 상태 체크하기 const React = require('react') const ReactDOM = require('react-dom') class App extends React.Component{ state={ va.. 2022. 4. 20. 이전 1 2 다음
