Front-End

컴포넌트 내에서 값이 변하 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...

배열 함수의 한 종류인 reduce함수를 배우다. reduce함수는 배열내 요소들로 누적되는 특정 행위를 한다. 특정 행위는 reduce함수 내 괄호안에 함수로 정의할 수 있다. 대표적으로 배열 안의 모든 수의 합을 구할 수 있다. reduce함수의 진행과정은 위의 이미지를 참고하면 된다. 들어간 함수에 따라 배열의 요소에 적용되는 것이 바뀐다. reduceRight는 배열의 가장 뒷부분부터 reduce함수가 진행되는 것이다.

배열 함수의 한 종류인 filter함수를 배우다. 배열내 요소를 filter 조건에 true인 경우만 필터링하는 filter함수이다. Case 1은 함수를 따로 만들어서 filter 함수로 배열 내 각각의 요소들이 조건이 충족하는지 확인한다. Case 2는 filter 함수에서 화살표함수를 사용한 방법이다.