React

위의 코드는 JavaScript, HTML 둘 다 아니다. 위의 문법은 JSX(Javascript Syntax Extension) 라고 불리는 JavaScript 확장 버전이다.HTML 과 아주 비슷하게 생겼고 JavaScript 파일 내에서 작성할 수 있다. JSX

프론트엔드 개발에서 컴포넌트(Component) 라는 단어를 많이 사용한다. 컴포넌트란 재사용 가능한 UI 단위이다.컴포넌트를 하나만 만들고 여기저기서 재사용한다면 input 디자인이 바뀌었을 때 css 한 줄만 수정하면 바뀐 디자인을 모든 페이지에 반영할 수 있다.컴

state란 말 그대로 컴포넌트의 상태 값이다.state와 props는 둘 다 object 이고, 화면에 보여줄 정보(상태)를 가지고 있다는 점에서 서로 비슷한 역할을 한다.props 는 컴포넌트를 사용하는 부모 쪽에서 전달해야만 사용할 수 있고(함수의 paramete

Framework: 다른 사람이 만든 틀 안으로 내가 들어가서 작업하는 것Library: 내 작업에 다른사람이 만들어 둔 코드를 가져와서 사용하는 것Angular2010년 Google에서 개발한 FrameworkTypeScript 기반으로 매우 안정적이고 탄탄한 Fro

npm으로 다운로드 받은 모든 패키지들이 저장되어 있는 폴더CRA 는 리액트로 프로젝트를 구성할 때 필요한 패키지들을 자동으로 다운로드 받아준다.프로젝트에 대한 정보들(이름, 버전 등)이 기입된 파일script : 프로젝트에서 실행할 수 있는 명령어들이 있는 곳최초에

html의 엔트리 포인트사용자가 프로젝트를 요청하면 최초로 보여지는 htmlJavaScript의 엔트리 포인트html과 react 컴포넌트를 연결해주는 중간다리 역할을 함import 구문import : ‘어디서 가져온다’ 라는 의미from 뒤에는 경로가 표시되는데 re

SPA (Single Page Application) : 페이지가 한 개인 애플리케이션WeBucks-frontend : login.html, list.html, detail.html - 페이지 수만큼 html 파일이 존재리액트 프로젝트에서 .html 파일의 개수는? 1

설치 시 node-modules 폴더에 sass 폴더가 생성된다. (package source code)\--save : package.json에 설치된 패키지의 이름과 버전 정보를 업데이트Sass 파일의 확장자는 .scss 이다. .css 확장자로 되어 있는 파일을

mock: 거짓된, 가짜의이름에서 알 수 있듯이 mock data 는 가짜 데이터, 샘플 데이터 정도로 해석할 수 있다.즉, 실제 API 에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만들어 본 데이터를 말한다.프론트엔드 개발을 진행하려하는데 필요한

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)" 할 수 있게 해주는 함수입니다. \- React 공식 문서Hook은 class 안에서는 동작하지 않는다.대신 class 없이도

state : 상태단어 뜻 그대로 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값이다.state는 화면에 보여줄 컴포넌트의 UI 정보(상태) 이다.state는 컴포넌트 내에서 정의하고 사용하며 얼마든지 데이터가 변경될 수 있다.함수 컴포넌트에서 state, 즉 해당 컴

이름 그대로 변하지 않는 데이터. 즉, 정적인 데이터UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API등을 통해서 가져올 필요가 없는 정적인 데이터들을 상수 데이터로 만들어 UI를 효율적으로 구성할 수 있다.반복되는 UI를 하드코딩으로 일일이 만들어두게 되면,

백앤드로부터 데이터를 받아오려면 api를 호출하고 데이터를 응답받는다. 이 때 자바스크립트 Web API fetch() 함수를 쓰거나 axios 라이브러리를 사용할 수 있다.참고로 Web API는 클라이언트 측에서 사용할 수 있는 자바스크립트 내장함수라고 생각하면 된다

컴포넌트 함수 내부에서 특정 값에 따라 선택적으로 렌더링하는 것을 조건부 렌더링이라고 한다. 가독성을 높이는 조건부 렌더링 방법과 특징을 알아보고 어떻게 가장 최적화된 코드를 작성할 수 있는지 알아보자.리액트 공식 문서에서 소개하는 가장 기본적인 패턴이다. Greeti

React에서 함수 컴포넌트의 rendering이란 state, props를 기반으로 UI 요소를 그려내는 행위이다.렌더링의 결과물은 UI 요소, 그러니까 화면에 JSX 문법으로 무엇이 나타날지를 적어둔 컴포넌트들이라고 할 수 있다. 렌더링 결과물에 영향을 주는 요소는