본문 바로가기

react44

[220422] 리액트로 덧글기능 만들기 (CRUD 중 UD), 생명주기함수 CRUD 중 U 만들기 클릭했을때 input박스가 나오도록 만들기 //App.jsx componentDidMount(){ //최초실행 this.setState({ ...this.state, list:[ //클릭유무를 알 수 있도록 updateflag 추가 {userid:'ingoo7022',content:'안녕하세요2222',date:'2022-04-21',updateflag:true}, ... //CommentList.jsx handleSubmit = e=> { e.preventDefault() console.log(this.state.value) const obj={ userid:'ingoo7022', content:this.state.value, date:'2022-04-21', //클릭유무를 알 .. 2022. 4. 29.
[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.
[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.
[220418] webpack이란? 프론트엔드를 한다면 필수적으로 알아야할 webpack. 프론트엔드 개발을 하지 않더라도 알아두면 좋은 webpack. webpack이란? html에 들어가는 js 파일들을 뭉쳐서 하나로 만들어주는 방식을 모듈 번들링(=webpack_)이라고 한다. 굳이 하나로 뭉쳐서 하나로 만들어야하는 이유는? 1. 한 페이지를 구성하기 위해 존재하는 여러 파일들을 하나의 파일로 만들어 읽기때문에, 웹페이지 성능이 최적화된다. 2. 혼자서 프로그램을 작성할때도 변수명이 겹치는 것을 파악하기 힘든데, 여럿이서 사용한다면 더 힘들어진다. 하지만 하나의 파일로 묶어줌으로써 개발할때 편리해진다. 기초개발 환경세팅 test폴더를 만들고 그 안에 index.html, dist폴더, src폴더를 만든 후 webpack 라이브러리를 .. 2022. 4. 19.
[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] 리스트로 DB 데이터를 다루는 방법 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.

티스토리툴바