본문 바로가기

프로그래밍16

[220502] styled-component 사용하기 디렉토리의 역할 src component - 공통적으로 들어갈 컴포넌트 모음 hook - 훅에 관련된 내용을 넣는 컴포넌트 pages - 화면에 출력할 영역을 넣음 reducer - reducer 모음 (useReducer가 아닌 redux 관련) store - Context와 같이 전역상태를 만들어주는 디렉토리 컴포넌트별로 기능을 부여할 수 있는 리액트 특성상 디렉토리는 파일 정리 이상의 의미를 가진다. 보통 기능별로 이렇게 디렉토리를 나누니 가이드 삼자. styled-component 설치하기 $ npm install styled-components styled-components 세팅하기 import styled from 'styled-components' styled-components 사용하기 .. 2022. 5. 8.
[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.
[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.
[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.
[220415] 빙고게임 완성하기 - 02 클릭하면 X -> O 순서대로 찍히게 하기 한번 클릭한 곳은 다시 클릭해도 O/X가 바뀌지 않게 하기 클릭한 곳의 배열과 빙고조건을 충족시키는지 출력 //Square 컴포넌트 위에 작성 const calcuateWinner = (squares) => { const lines = [ [0,1,2], [3,4,5], [6,7,8], [2,4,6], [0,4,8], [0,3,6], [1,4,7], [2,5,8], ] for(let i=0; i 2022. 4. 17.
[220414] 빙고게임 완성하기 - 01 1-9까지 채워진 숫자판 만들기 클릭하면 X가 표시되는 숫자판 변형본 (Square, Board 컴포넌트만) class Square extends React.Component{ render(){ //{this.props.value} 부모에게서부터 던져준 데이터를 보여주겠다!!!! return( { this.props.onClick() } } > {this.props.value} ) } } class Board extends React.Component{ state = { // square:[null,null,null,null,null,null,null,null,null] squares : Array(9).fill(null) } handleClick = (i) => { const squares = [..... 2022. 4. 17.
[220414] 리스트의 단점을 극복하는 상태 끌어올리기 리스트의 단점 리스트에서 props는 부모->자식 간에 데이터를 전달이 가능하게 해주지만, 동일선상에 있는 관계에서는 데이터를 넘겨줄 수 없다. 해결책 : 상태 끌어올리기 부모컨텐츠에 App component에 state를 만들어서 전달해준다. 리액트 사이트에서 설명하는 상태 끌어올리기 : https://ko.reactjs.org/tutorial/tutorial.html#lifting-state-up App에 state값을 저장하기 코드를 실행시키면, Form 컴포넌트에 있는 state가 아닌, App 컴포넌트에 있는 state가 변화된걸 볼 수 있다. class Form extends React.Component{ state ={ value:'', } handleChange = e => { const .. 2022. 4. 17.
[220414] 리액트에서 이벤트 생성하기 1. 이벤트명은 Camel 형태로 쓰기 html에서 이벤트를 만들때 버튼 리액트에서 이벤트를 만들때는 지정되어있는 함수를 쓸때는 Camel 형태로 사용해야한다. Camel형태로 안 쓰면 실행 자체가 안 된다. class Login extends React.Component{ state = { name:'ingoo2' } render(){ return( {this.state.name} ) } } 2. 이벤트는 익명함수로 감싸기 render() 자체가 내 안에 있는 코드는 모두 실행할게!!라는 함수다. 따라서 onClick함수가 바로 실행되기때문에, 사이트가 렌더되자마자 클릭하기도 전에 알람창이 뜨게된다. 버튼할때 클릭을 하려면 익명함수로 감싸게 되면 된다. 왜? 함수가 호출되지 않으면 실행이 될 수 없기 .. 2022. 4. 16.
[220413] 데이터(props)가 바뀌면(state) 화면이 바뀐다(component) 한 페이지를 그릴때 , 보여지는 화면에 관련된 모든 컴포넌트를 가져오는 리액트의 습성때문에 기본적인 요청&응답이 길다. 예) 로그인 버튼을 누름 -> 로그인에 관련된 컴포넌트 모두 가져옴. 데이터를 건드리지 않고 화면을 모두 그리고 난 후에는 완료되었다는 신호를 준다. ComponentDidMount라는 신호 (DOMContentLoad와 목적이 같음) 여기부터 비동기통신인 AXIOS를 사용해서 비동기적 통신으로 데이터와 접속함. 리액트는 NODEJS와 webpack의 도움을 받아서 이루어진다. webpack : 100개의 서로다른 js를 1개의 js로 통합시켜주는 번역기 ( = 번들파일) 왜? -> 다른 js 파일을 만들다보면 변수명이 겹치게 되는데 그런 일을 방지해줌. 등장배경 -> require이 .. 2022. 4. 15.

티스토리툴바