JiYoung Dev 🖥

🎈 참참참 게임 만들기 📖 게임규칙 1. 나는 공격, 컴퓨터는 수비 담당 2. 내가 버튼을 클릭했을 때 나와 컴퓨터의 선택이 같다면 나(공격)의 승리 3. 나와 컴퓨터의 선택이 다르다면 컴퓨터(수비)의 승리 📖 작성코드 import React, { useState, useEffect } from "react"; const Ex03 = () => { /** * 참참참 게임을 만들어보자! * 게임 규칙 * 1. 나는 공격, 컴퓨터는 수비를 담당 * 2. 내가 버튼을 클릭했을 때 나와 컴퓨터의 선택이 같다면 나(공격)의 승리 * 3. 나와 컴퓨터의 선택이 다르다면 컴퓨터(수비)의 승리 * * 문제풀이 * 1. 필요한 state들을 관리 : 내선택, 컴퓨터선택, 게임결과 * >> useState * 2. 내 선..

LifeCycle 현재 react는 node.js 서버 위에서 돌아가고 있음. node.js는 싱글스레드로 작업을 진행하는 프로세스가 하나 밖에 없음. 그렇기 때문에 위에서 아래로 코드가 작성된 순서대로 진행되는 java와는 달리 코드 중간에 조건문과 같은 무거운 작업이 있으면 위에서 아래로 코드 작성 순서대로 작업을 진행하지 않고, 가벼운 작업부터 진행 후 무거운 작업을 진행시킴. 따라서 React에서는 위에서 아래로 순서대로 코드를 작성한다고 해서 원하는 대로 작업이 실행되지 않음. Reactsms 컴포넌트가 실행되거나, 업데이트 되거나, 삭제될 때 특정 이벤트가 발생함. 이러한 React의 특성을 생명주기(LifeCycle)이라고 하며, React를 통해 우리가 원하는 대로 웹페이지가 작동하게 만들..

useRef 🎈 useRef 예제 작게 버튼을 클릭하면 사각형의 크기가 작게, 원본 버튼을 클릭하면 원본 크기로, 크게 버튼을 클릭하면 사각형의 크기가 크게 변하게 만들기 📖 자바스크립트 자바스크립트에서는 이 문제를 풀기위해 사각형 요소에 접근하기 위해서 document에 접근해야 했음 사각형 요소 : 자바스크립트로 id가 box인 요소에 접근하기 : document.getElementById('box").style.width= 100px 📖 리액트에서 변경시키려면? DOM으로 마찬가지로 접근해야함 useRef 사용 usdRef : 특정 DOM 요소에 접근하고 싶을 때 사용 - 바닐라JS에서는 getElementById, querySelector 등을 사용하여 특정 DOM 요소에 접근하였음 - React..

🎈 구성하기 📖 컴포넌트 1. TodoList 2. TodoItem 3. TodoInput 📖 컨텍스트 - TodoContext 전역적으로 사용할 값 1. todos : 내용, 완료여부 (객체로 저장) 2. newTodo : 내용 🎈 코드 작성하기 (순서) 1) 화면에 첫 Todo 보이게 하기 컴포넌트 연결 컨텍스트 연결 컨텍스트로 사용할 값 state로 저장 후 초깃값 지정하여 출력되도록 2) 입력창에 글씨를 입력하면 newTodo에 저장 handleNewTodo() 3) Add 버튼클릭시 Todos에 newTodo 객체 추가, input 텍스트 창 공백으로 addNewTodo() 4) add 버튼 클릭시 추가된 객체 화면에 띄우기 addNewTodo() 5) delete 클릭하면 해당 리스트 삭제 d..

🎈 context API 쓰는 이유 📖 props의 단점 단방향 데이터의 흐름 위와 같은 데이트 흐름을 단방향 데이터 흐름 (one-way reactive data flow)이라하고 react는 이러한 흐름을 가지고 있음 단방향 데이터 흐름의 장점 1. 관리에 용이함 2. DOM과의 궁합 - tree구조의 dom 구조에 유리함 단방향 데이터 흐름의 단점 자식요소에서 부모요소로 데이터를 바로 전달할 수 없음 ⚙️ 부모요소가 자식요소의 값을 받아볼 수 있도록 하는 방법 귀찮다 >> contextAPI를 사용함 🎈 context API 📖 context API 사용하는 이유 props를 사용하면 여러번 사용해야 함 데이터를 따로 보관하여 끌어다 쓰는 법 >> Context API 장점 : 전역적으로 사용할 수..

지난주부터 리액트를 배우기 시작했는데 구조와 문법, 쓰는 이유에 대하여 이해가 안되어 따로 정리한 내용! 1. 리액트(React)란? 리액트란, 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 meta(구 facebook)에서 제공해주는 라이브러리로 주로 SPA(Single Page Application)을 만들 때 사용 React를 사용하면 재사용 가능한 UI 구성 요소를 만들 수 있음 1-1. 기존 자바 스크립트의 단점 1) HTML과 JS가 가진 분리감 & 직관적이지만 너무 긴 자바스크립트 문법 자바스크립트에서 HTML 요소에 접근하기 위해서는 document.getElementById 등 으로 시작하는 긴 코드 작성을 통해 요소를 불러 올 수 있음 리액트는 HTML과 JS 문서를 합..

terminal 명령어 npm : 이미 설치가 되어있을 아이를 사용할 때 (ex. terminal start) npx : 설치가 되어있지않는 것을 사용할 때 (ex. npx create-react-app project02) 종료 : ctrl + C ⚙ project 폴더 구성 node_modules : 필요한 장치들 public : 정적인 파일 / 이미지, html, json, text 등 src : js, css 등 동적으로 동적하기 위해 필요한 친구들 🎈 컴포넌트 리액트는 화면에서 UI 요소를 구분할 때 '컴포넌트'라는 단위를 사용함 커다란 단위, 개발자가 커스텀할 수 있는 최소 단위 (기능별 혹은 페이지별로 만드는 경우가 많음) 내가 원하는 태그들을 모아서 하나의 단위로 만들어준다. react 문법..

🎈 리액트란? 자바스크립트 라이브러리 중 하나 프레임워크적인 성격을 띄고 있음 🎈 리액트를 사용하는 이유 자바스크립트만으로는 부족하니까! 📖 자바스크립트의 단점 1. HTML과 JS가 가진 분리감 - JS에서 HTML에 접근하기 위해서는 document. 으로 접근해야 함 > 관련있는 HTML, JS 문서들을 JSX로 합쳐줌! 2. 직관적이지만 너무 긴 자바스크립트 문법 3. 새 페이지를 들어갈 때마다 새로고침 - 사용자가 피로도를 느끼게 됨 > 새로운 페이지나 메뉴를 들어갈떄 새로고침이 되지 않아 사용자의 피로도를 줄여줌 : Single Page Application(SPA) 🎈 라이브러리 vs 프레임워크 개발을 도와주는 역할이지만 개발의 주체가 다름 📖 라이브러리 개발의 주체는 나! 기능만 가져다 사..