본문 바로가기

전체 글227

[React] React로 가위 바위 보 게임 만들기 3 https://conquer-it.tistory.com/192 [React] React로 가위 바위 보 게임 만들기 2 https://conquer-it.tistory.com/191 React로 가위 바위 보 게임 만들기 1 우선, 버튼을 클릭했을 때 유저 박스의 사진이 바뀌는 것까지는 구현이 되었다. 다음 할 일은 컴퓨터 박스를 구현 하는 것이다. 3. 컴 conquer-it.tistory.com React로 가위 바위 보 게임 만들기 2 현재 미완성된 기능은 아래와 같다. 게임 결과를 통해 누가 이겼는지 승패를 결정한다. 승패 결과에 따라 박스 테두리의 색이 바뀐다.(ex. 승: 초록, 패: 빨강, 무: 검정) 이긴 횟수, 비긴 횟수, 진 횟수를 UI에 보여준다. 리셋 버튼을 누르면 UI에 보여줬던 .. 2023. 2. 10.
[React] React로 가위 바위 보 게임 만들기 2 https://conquer-it.tistory.com/191 React로 가위 바위 보 게임 만들기 1 우선, 버튼을 클릭했을 때 유저 박스의 사진이 바뀌는 것까지는 구현이 되었다. 다음 할 일은 컴퓨터 박스를 구현 하는 것이다. 3. 컴퓨터가 랜덤한 아이템 선택하기 우선 1판할때마다 UI가 바껴야하기 때문에 state를 사용해야 한다. 또한 유저가 랜덤한 버튼을 클릭할 때 컴퓨터가 랜덤한 아이템을 출력시켜야 하기때문에 play함수 안에서 실행시켜야 한다. 우선 완성된 코드부터 살펴보자. App.js import { useState } from "react"; import "./App.css"; import Box from "./component/Box"; const choice={ rock:{ nam.. 2023. 2. 8.
[React] React로 가위 바위 보 게임 만들기 1 React로 가위바위보 게임을 만들어 보자 게임 규칙 아래 가위 바위 보 버튼을 클릭하여 랜덤한 값을 내는 컴퓨터를 이기면 되는 것이다. 이 게임을 만들기 전 어떤 내용이 들어가야 하는지 알아보자. 박스 2개가 있어야 하며 그 안에는 컴퓨터와 유저를 구분해주는 텍스트와 사진, 결과가 있다. 그 아래에는 가위 바위 보 버튼이 위치한다. 버튼을 클릭하면 클릭한 값이 유저 박스에 보여진다. 컴퓨터는 랜덤하게 아이템 선택이 된다. 3번, 4번의 결과를 통해 누가 이겼는지 승패를 결정한다. 승패 결과에 따라 박스 테두리의 색이 바뀐다.(ex. 승: 초록, 패: 빨강, 무: 검정) 이긴 횟수, 비긴 횟수, 진 횟수를 UI에 보여준다. 리셋 버튼을 누르면 UI에 보여줬던 횟수가 0으로 초기화 된다. 1. 박스 2개와.. 2023. 2. 6.
[React] state를 이용해 간단한 count 기능을 만들어보자 오늘 만들 것은 버튼을 눌렀을 때마다 카운트가 1씩 증가하는 기능을 React의 state를 이용하여 만들어 볼 것이다. 1. 틀 만들기 일단 기본적인 틀을 잡고 시작하자. import React from 'react'; import './App.css' export default function App() { return ( 0 증가 ) } 현재 카운트를 보여줄 div 박스 하나와 버튼 하나를 만들어 주었다. 2. 변수 설정과 클릭 이벤트를 주자 여기서 우리가 하고 싶은 것은 버튼을 클릭하면 div박스에 있는 숫자가 계속해서 증가하는 것이다. div박스 안에 있는 숫자가 계속 변해야 하기때문에 우리의 div박스 안의 값을 변수로 만들어 주어야 한다. 또한 클릭했을 때 어떤 이벤트가 일어나야 하기 때문에.. 2023. 2. 3.
[JS] React에서 자주 사용되는 JS 문법 몇가지 오늘은 React에서 자주 사용되는 JS 최신 문법(es6) 몇가지에 대해 알아보자. 1. Object Shorthand Assignment 예를 들어 name, age라는 2개의 변수와 person이라는 객체가 있다고 가정하자. 그 객체 안의 key와 value의 값은 아래와 같다. let name = "Lee" let age = "20" let person = { name: name, age: age } console.log(person); 콘솔창에 찍어보면 name에 변수 name이 age에는 변수 age가 잘 들어간 것을 볼 수 있다. 위의 경우처럼 key의 이름과 value의 이름이 서로 같다면 아래처럼 위의 코드보다 간결하게 코드를 작성할 수 있다. let name = "Lee" let age.. 2023. 2. 1.
[React] React의 state란? state란? 일반적으로 컴포넌트의 내부에서 변경 가능한 데이터를 관리해야할 때에 사용 한다. 값을 저장하거나 변경할 수 있는 객체로 보통 이벤트와 함께 사용된다. 컴포넌트에서 동적인 값을 상태(state)라고 부르며, 동적인 데이터를 다룰 때 사용된다 볼 수 있다. props와 state의 차이점은? (리액트 페이지에 나와있는 내용이다. 자세하게 알고 싶다면 아래 링크) https://ko.reactjs.org/docs/faq-state.html 컴포넌트 State – React A JavaScript library for building user interfaces ko.reactjs.org 사용방법 const [state, setState] = useState(initialState); const .. 2023. 1. 30.
[React] React의 props 이해하기 props란? properties의 줄임말으로써 컴포넌트의 입력값이다. 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다. 사용방법 프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용 한다. 그럼, 저번에 컴포넌트까지 만들어 놓은 코드에 props를 적용해 보자. 아래 코드는 저번까지 했던 코드이다. import logo from "./logo.svg"; import "./App.css"; function Header() { return ( WEB ); } function Nav() { return ( html css js ); } function Article() { return ( Welcome Hello, WEB ); } function .. 2023. 1. 27.
[React] React 컴포넌트(component)란? 컴포넌트 리액트는 사용자가 정의한 태그를 만들 수 있다. 그렇다면 어떻게 사용자가 정의한 태그를 만들 수 있을까? 우선, App.js에 아래와 같은 코드를 작성해보자. import logo from "./logo.svg"; import "./App.css"; function App() { return ( WEB html css js Welcome Hello, WEB ); } export default App; 이 코드를 보면 헤더영역, NAV영역, 본문 영역으로 나눠져있고 그 안에 세부적으로 또 코드가 있는 형태이다. 만약 이 코드가 이렇게 적고 단순한 코드가 아니라 굉장히 많은 내용을 가지고 있는 코드라면 하나하나 수정하는데 많은 시간을 소요할 것이다. 우리는 이것들을 정리정돈 할 필요가 있고 같은 영.. 2023. 1. 25.
[React] React 코드 수정 방법 https://conquer-it.tistory.com/184 개발환경 구축을 완료하고 터미널에 npm start를 작성하면 많은 파일과 새로운 웹 페이지가 만들어진 것을 볼 수 있다. React 수정하는 법! 우리가 npm start를 작성하면 src안에 있는 index.js를 동작시킨다. 그렇다면 index.js에는 어떤 코드가 있을까? import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document... 2023. 1. 23.

티스토리툴바