node.js/react

React-Router_DOM(작성중)

npm install react-router-dom 버전업이 된지 v6 - 2021-12-17 버전이 올라갈때마다 다른 라이브러리들이 바뀐다. v4 v5넘어갈때마다 크게바뀐다.. Next Router context API 사용할때 최상위에 오려놓고 시작해야함 Router 세팅을 App컴포넌트 안에서 끝내야함 메뉴구성시작 Routes 메뉴하나당 쓸수있는 Route import {BrowserRouter as Router,Link,Routes,Route } from 'react reuter-dom' BrowserRouter as Router최상위로 올라간다 App.jsx HOME Counter Comment Login 이부분에 작성 App.jsx HOME Counter Comment Login App.jsx..

react 커스텀 훅

처음에 열나게 하고 나중에 재활용해서 쉽게쉽게쓰자 처음만들때만 힘들지만 나중에는 편하게쓸수있다. react에 단순한 컴포넌트를 생성했다면 이제는 기술적인것들 label React.useState('')//이함수가 실행될때[result > [ '' , ] React.useState('hello')//이함수가 실행될때[result > [ 'hello' , ] React.useState('hello')//이함수가 실행될때[result > [ 'hello' ,()=>{} ] import React,{ useState } from "react" const Form = () => { const [userid,setUserid] = useState('') const [password,setPassword] = use..

React 댓글기능(작성중)

React 를 이용한 댓글 작성을 위한 목차 컴포넌트 구조 children CommenForm 컴포넌트에 Input 박스와 button 버튼추가 App 컴포넌트에 가라데이터 주기 App컴포넌트의 state값을 CommentList 에서 props받기 props받은 데이터를 브라우저에 랜더시키기 등록 버튼을 눌렀을때 내용을 가져올수있게하기 Comment.css 더보기 *{margin:0; padding:0;} body{ font-family: 'Noto Sans KR', sans-serif; font-weight:300; } ul,li{ list-style:none; } .comment{ display:flex; flex-direction: column; flex-wrap: nowrap; padding:3..

React 틱택토

틱택토 게임은 두 명이 번갈아가며 O와 X를 3×3 판에 써서 같은 글자를 가로, 세로, 혹은 대각선 상에 놓이도록 하는 놀이이다. 이 게임을 구현하기위한 단계를 하나하나 작성해서 써볼 예정 컴포넌트 Game : Board, Square컴포넌트의 부모컴포넌트 Board : Square컴포넌트에서 버튼엘리먼트를 만들었다면 9개의 버튼을 만들어주고 이벤트를 주기 위한 컴포넌트 Square : 버튼 엘리먼트를 만드는 컴포넌트 class Square extends React.Component{ render(){ return( 버튼 ) } } class Board extends React.Component{ render(){ return( ) } } class Game extends React.Component{..

[React] Component, props, State

목차 Component props State Component 데이터가 바뀌면 컴포넌트가 다시실행된다. 컴포넌트를 작성할때 첫글자는 대문자로 해야한다. component는 props를 받고 state상태에 따라 출력함. 데이터(props)가 바뀌면 화면이 바뀐다(리액트의 모토) 컴포넌트는 리액트의 핵심 UI구축하는데 편하다. JavaScript 함수와 유사하다 class 컴포넌트 class App extends React.Component{ render(){ return( Hello react ) } } props 데이터 : props state 화면: 컴포넌트(component) 데이터가 바뀌면 컴포넌트가 다시실행된다. 변경이 불가능하다. props는 properties(속성)의 줄임말 부모 컴포넌트가..

React

목차 React 란? JSX babel React문법 ReactDOM.render React.Fragment React 란? React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 출처 : 위키백과 리액트 (웹 프레임워크) - 위키백과, 우리 모두의 백과사전 리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서[2] 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다.[3][4][5] ko.wikipedia.org React안에 react 는 메타(페이스북)이 만든거 jsx 다른사람이 만든 babel을 활용해서 메타(페이스북)이 만든거 React-dom 메타(페이..