Front-End/React.js

props와 state의 차이점을 알아보고 두 개념을 이용해서 컴퓨터와 경쟁하는 주사위 게임을 만들다. 1. props와 state 차이점 props는 부모컴포넌트에서 자식컴포넌트로 데이터를 객체형태로 보낼 때 사용한다. 하지만 props는 수정이 불가하고 각 자식 컴포넌트에서 고정된 채로 사용된다. props를 자식컴포넌트에서 변경하고 싶으면 state를 사용해서 변경해서 사용해야한다. 그림 2는 일반적으로 props와 state가 사용되는 흐름을 나타낸 것이다. 부모 컴포넌트에게서 props를 받고 그것을 state로 자식 컴포넌트에서 필요한 데이터로 변경해서 사용한다. props와 state개념을 사용해서 컴퓨터와 내 주사위 중 값이 큰 것이 나온 쪽이 이기는 게임을 만들어 보겠다. 2. 실습 전체..

컴포넌트 내에서 값이 변하 1. state 란? 기존의 자바스크립트에서는 화면의 특정 값을 변하게 하려면 단순히 해당 변수의 값을 변경시키면 됐다. count의 값을 버튼을 클릭할 때마다 1씩 올리고 화면에 보이게 하기 위해서 기존 자바스크립트에서 방법으로 코드를 작성한 결과↓ 리액트에서는 아무리 버튼을 클릭해도 화면에 실시간으로 값이 변하지 않는 것을 볼 수 있다. 그렇다고해서 count 변수의 값이 변하지 않고 있지 않다는 것을 console 창에서 확인할 수 있다. 그렇다면 count의 값은 정상적으로 변하는데 화면에 변한 값을 출력하고 싶으면 어떠한 방법을 사용해야 할까? 바로 state를 사용하는 것이다. state는 컴포넌트 내부에서 사용하는 데이터를 변경할 때 사용하는 것이다. 일반 변수는 ..

화면에서 UI 요소를 구성하는 최소단위인 컴포넌트를 배우다. 1. 컴포넌트 정의 컴포넌트는 React에서 자주 사용한다. 반복되는 화면의 큰 틀, 일부분 등을 컴포넌트화 해서 app.js 사용할 수 있다. 2. 컴포넌트 사용 2 - 1. 상황 function App() { return ( 아메리카노 3500 아메리카노 3500 아메리카노 3500 ); } 위 코드를 보면 같은 구조의 코드가 반복되는 것을 볼 수 있다. 이러면 코드가 더러워지고 수정하기 불편하다. 이런 상황에서 컴포넌트를 사용하는 것이다. 2 - 2. 컴포넌트 파일 생성 컴포넌트파일들은 src 폴더 내에서 components 폴더를 생성해서 그 안에 컴포넌트 파일들을 생성해서 사용해 준다. 단, 컴포넌트 파일의 이름의 첫 스펠링은 무조건 ..

JSX문법 실습 index.js // index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; // JSX 문법 및 특징 정리 import App from './App'; import reportWebVitals from './reportWebVitals'; // JSX문법을 활용한 실습 import AppSample from './AppSample'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( // // ); // If you want to start measuring performan..

리액트에서 사용되는 JSX문법에 대해서 배우다. import './App.css' /* shift + alt + f : prettier 저장 JSX문법 - HTML 과 JS를 하나의 파일에 작성할 수 있는 문법 JSX문법의 특징 1. 반드시 부모요소가 하나여야 한다. 모든 것을 감싸는 div태그로 해결 + 꼭 가 아니어도 된다. 2. 표현식 사용 {변수}로 표현식 단, if문은 사용할 수 없다.. 2-1. 조건식이 1개일 때 - && 연산자 하나의 조건식을 확인할 때 A && "B" => A가 true이면 &&의 오른쪽이 출력된다. 2-2. 조건식이 2개일 때 - 삼항연산자 활용 2-3. 조건식이 3개일 때 - return문 위에 조건식을 만든 후 결과값만 {}에 넣어준다. 3. 기존 HTML문법과 다른..

리액트 실행 및 파일 설명 리액트 실행 VSCode에서 새로운 터미널을 열어준다. 새로운 터미널의 경로가 리액트가 설치된 폴더에 연결이 됐는지 확인하고 안되면 cd로 경로 변경한다. npm start를 하면 메인페이지가 새로운 탭(크롬)에 띄워진다. 파일 설명 node_modules 폴더는 우리가 프로젝트 구동에 필요한 라이브러리의 소스코드를 모아둔 폴더이다. public 폴더는 잠깐 html 파일이나 이미지 파일을 보관할 때 사용하는 폴더이다. 가장 중요한 src 폴더에 코드를 짠다. App.js가 메인 페이지이다. App.js에서 코드를 짜면 메인 페이지에 바로 반영이 된다. js 파일에다가 html 코드를 짰는데도 브라우저에 띄워지는 이유는 App.js를 index.html에 넣어주는 index.j..

React.js 정의와 설치 및 프로젝트 폴더 세팅 1. React.js? 리액트는 자바스크립트만으로 UI 구성이 어려워서 Meta에서 만든 라이브러리이다. JS의 단점은 HTML파일과 JS파일을 분리해야하지만 React.js는 JSX문법을 사용해서 HTML문법과 JS 문법을 동시에 사용한다. JSX는 JS에 XML을 추가한 확장 문법이다. 파일을 분리하지 않기 때문에 가독성이 높고 작성하기 쉽다. JS의 또 다른 단점은 document 문법이 너무 길다는 것이다. 그리고 새 페이지를 들어갈 때마다 새로고침을 한다. 리액트는 SPA로 서버로부터 새로운 페이지를 불러오지않고 현재 페이지를 동적으로 다시 작성함으로써 유저와 소통하는 웹사이트이다. 한국에서는 React.js를 많이 사용하기 때문에 React...