React 입문
1.React 란?
2023.02.03 금요일 React란 무엇일까? React.js 는 SPA 기반의 프론트엔드 개발 프레임워크중 하나로서, 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법을 이용한다. 비슷한 친구들로는 AngularJS, VueJS 등이 있다. SPA란? Sing
2.React 에서 자주 사용되는 ES6 문법
2023.02.03
3.React 환경 셋팅
2023.02.03터미널, power shell 또는 git bash를 켜서 아래 코드를 입력npm 이란?NPM(Node Package Manager)은 무수히 많은 third-party 패키지들이 모여있는 집합소 입니다. 우리는 npm에서 여러 패키지를 다운받아 활용
4.CRA(Create React App)
2023.02.03Create React App : Set up a modern web app by running one command.SUPER EASY!한 줄의 명령어 입력으로 React 프로젝트 개발에 필수요소를 자동으로 구성하는 방법입니다!React 프로젝트를
5.React Component
2023.02.04
6.JSX(JavaScript + XML)
2023.02.04리액트에서는 딱 하나의 html 파일만 존재합니다. (public 폴더 아래에 있는 index.html)JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그립니다.자바스크립트 안에서 html 태그같은 마크업을 넣어 뷰(UI) 작업
7.Props
2023.02.04컴포넌트 끼리의 정보교환 방식이다.부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터. 즉, 컴포넌트 간의 정보 교류 방법이다.props는 반드시 위에서 아래 방향으로 흐른다. 즉, 부모 → 자식 방향으로만 흐른다(단방향).props는 반드시 읽기 전용으
8.State
2023.02.06 State State란 무엇인가? State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. 바꿔야 하는 이유는 UI(엘리먼트)로의 반영을 위해서 이다. State를 만들 때는 useState()를 사용한다. useState 훅을 사용하는 방식
9.불변성&순수함수
2023.02.06불변성이란 메모리에 있는 값을 변경할 수 없는 것을 말한다. 자바스크립트의 데이터 형태중에 원시 데이터(숫자, 문자, 불리언등)는 불변성이 있고, 원시 데이터가 아닌 객체, 배열, 함수는 불변성 없다.만약 우리가 let number = 1 이라고 선
10.Component & Rendering
2023.02.06컴포넌트는 리액트의 핵심 빌딩 블록 중 하나이다. 리액트에서 개발할 모든 애플리케이션은 컴포넌트라는 조각으로 구성되고, UI 구축 작업을 훨씬 쉽게 만들어준다. 리액트 컴포넌트는 선언형 프로그램 이다. 리액트의 컴포넌트기반 개발 이전에는 브라우저에서
11.Styling
2023.02.06아래 이미지와 같이 한번 구현해보자. 지금까지, 한 파일 내에 style을 작성해는데, 이부분을 CSS 파일로 따로 작성해보자.JSX는 사실 HTML과 굉장히 닮아 있기 때문에 방법이 크게 다르지 않다. 단, 한가지 차이점이 있다면 class → cl
12.반복되는 컴포넌트 처리하기
2023.02.06 리액트에서의 map 우리 코드 다시 확인해보기 지난시간 아래와 같은 화면을 구현했었다. 하지만 이렇게 하는 것은 같은 코드가 여러 번 중복이된다. “감자", “고구마" 와 같은 이름들도 개발자가 직접 입력을 해줘야 하고, 데이터로서 관리가 되고 있