[react] 리액트 챗봇 스타일의 대화형 설문 조사 화면 구현 최근에 회사 프로젝트에서 리액트를 이용한 간단한 설문조사 앱을 만드는 중입니다. 여러 가지 시안 중에서 앱에서 많이 볼 수 있는 대화형의 설문 조사 형식이 있어, 마크업의 일부를 간단하게 공유합니다. 여기서는 앱 화면에 차례대로 설문 문제와 대답을 보여주는 일부만 공개를 하였고, 모든 문제를 마치면 결과지를 보여주는 화면은 없습니다. 구현 화면 react 대화형 설문조사 앱 구현 설정 npm: npm 패키지 설정(create react 폴더 설정) style css: tailwind 설치 중앙 상태 관리: context api 화면 구현 순서: 테스트 문제, 보기 5문항 -> 나의 대답 선택 -> 나의 대답 결과 -> 다음 문제 폴더 구조 리액트 대화형 설문 테스트 화면 formData.js - 설문 조.. [react] react의 useReducer 사용법 useReducer state가 많을 경우, state를 하나로 묶어주는 역할을 합니다. useReducer 사용 방법 state 값과 dispatch 함수를 받아오게 되는데, 여기서 state 는 현재 가르키고 있는 상태고, dispatch 는 액션을 발생시키는 함수입니다. dispatch(action) 함수 안에 파라미터로 액션 값을 넣으면 리듀서 함수가 호출되는 구조입니다. state를 바꾸기 위해 action을 만들고, 이벤트를 통해 action을 dispatch하여 reducer 함수의 action을 불러와 state 값을 변경합니다. useReducer 문법 //state 초기값 세팅 const initialState = { winner: ' ', } //export로 모듈화, 변수로 지정, .. [react] 리액트 끝말잇기 게임 만들기(ft. 컴포넌트 구조) 리액트 class/hooks로 구현한 숫자야구 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 순서 순서 특이사항 컴퓨터가 랜덤 4자리 숫자 문제 제출 예시) 4385, 조건)겹치지 않는 4개 사용자가 답을 입력 입력한 답의 결과 발표 결과 발표: 홈런/스트라이크/볼 홈런) 숫자가 모두 일치할 경우 스트라이크) 자리수가 맞을 경우 볼) 자리수는 맞이 않으나, 숫자가 맞을 경우 답이 맞을때까지 10회 제한을 둠 파일 구조 client.jsx >NumberBaseball.jsx >Try.jsx client.jsx import React from 'react'; import ReactDom from 'react-dom'; import NumberBaseball f.. [react] 리액트로 끝말잇기 게임 만들기 리액트 class/hooks로 구현한 끝말잇기 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. client.jsx const React = require('react'); const ReactDom = require('react-dom'); const WordRelay = require('./WordRelay') ReactDom.render(, document.querySelector('#root')); WordRelay.jsx - class 방식 클래스 메소드를 무조건 화살표 함수의 문법을 사용합니다. const React = require('react'); class WordRelay extends React.Component { state = { word: .. [react] 리액트 컴포넌트 props로 데이터 전달 리액트에서 컴포넌트간 데이터 전달 방법, props에 대하여 알아보겠습니다. props 부모컴포넌트에서 자식 컴포넌트로 데이터 전달 방식입니다. props 사용방법 //컴포넌트 태그내 예제1. 반복문을 컴포넌트 분리 class 방식 태그의 반복되는 부분을 컴포넌트로 만듭니다. props를 이용하여 데이터를 전달합니다. 부모 컴포넌트 import React, { Component } from 'react'; import Fruit from './Fruit'; class Map extends Component { state = { fruits: [ {fruit: '🍉', color: 'green' }, {fruit: '🍓', color: 'red' }, {fruit: '🍊', color: 'orange' }.. [react] 리액트로 구구단 게임 만들기(ft. hooks 방식, cdn 설치) 리액트 hooks로 구현한 구구단 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. Class 방식과 Hooks 방식의 비교 Class 방식과 Hooks 방식의 비교 · Class보다는 Hooks를 리액트에서 권장하고 있는 방식입니다. · Class보다 Hooks가 코드가 훨씬 간결합니다. · 모든 state를 쪼개서 선언합니다. · this.state, this.setState을 사용 안합니다. · ref를 React.useRef으로 문법을 사용합니다. · render() 함수 부분은 같습니다. · Class에서는 state가 변경될 때마다 render함수 내에서만 재실행되지만, Hooks에서 함수 전체가 재실행되기 때문에 속도가 더 느릴 수 있습니다. state.. [js] react로 구구단 게임 만들기(ft. 클래스 방식, cdn 설치) 리액트 클래스로 구현한 구구단 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. class 방식 사용 방법 · state: 변하는 데이터는 state(변경 전 데이터)로 넣습니다.. · input의 입력될 value는 반드시 onChange 이벤트로 바꿔줍니다. · this.setState 사용방법: this.setState ({ 변경 후의 데이터 }) · html에서 class 속성 대신 className을 사용합니다. · html에서 label 태그의 for 속성 대신 htmlFor을 사용합니다. · setState는 비동기입니다. 리액트, 바벨 cdn 설치 간단한 예제는 cdn을 이용하여, react와 babel을 설치합니다. 리액트 구구단 게임 구현 html.. [react] 리액트 window용 개발환경 설치하기(ft. cra, node.js npm yarn) 리액트 개발 환경 설치 방법입니다. 1. Node.js 설치 Node.js는 크롬 v8 자바스크립트 엔진을 기반으로 한 서버사이드 자바스크립트 런타임입니다. 아래 Node.js 공식 홈페이지로 이동해주세요. nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org node.js 첫 화면에서 오른쪽의 최신 버전으로 다운로드합니다. 설치 화면 위의 추가적인 설치 화면이 나오면서 설치가 완료됩니다. 최신 node.js는 설치와 동시에 npm이라는 패키지 관리 도구까지 설치가 됩니다. 이제 npm을 이용하여 create react app을 설치하여 리액트 프로젝트를 시작할 수 있.. 이전 1 다음 반응형
