[새싹 프론트엔드] 6주차 - 1

리액트(React)란?

페이스북이 만든 사용자 UI 구축을 위한 라이브러리

 

특징

• Component 기반

• Virtual DOM 사용

• JSX 문법 사용

 

 

프레임워크 vs 라이브러리

프레임워크

• 일정한 형태와 기능을 갖추고 있는 골격 또는 뼈대를 의미

• 개발 시 필수적인 기능을 제공

• 개발자는 프레임워크가 정해준 방식을 따라야 함

• Angular, Vue.js, Spring, Django 등

 

라이브러리

• 특정 기능을 구현하기 위해 미리 만들어진 코드 또는 함수의 집합

  예) React, jQuery, tensorflow, pandas 등

 

제어의 흐름이 프레임워크에 있다 - 프레임워크 (밀키트)

제어의 흐름이 개발자한테 있다 - 라이브러리 (마트)

공통점 : 프로그래밍을 쉽게 할 수 있다, 재사용 가능한 함수 호출

 

React 특징 - 1

Component 기반

• 사용자가 정의한 태그를 의미

• 코드를 기능별로 나눠서 작성

• 빠르고 효율적인 화면 구성 가능

• 코드의 재사용성 및 유지보수가 편리

 

(컴포넌트는 하나의 태그)

 

코드를 하나의 파일로 만들어서 코드 한 줄만 쓰면 불러오기 가능

푸터 3번 가져다 쓰는 거 가능 100개 페이지 만든다 치면 헤드 계속 붙이기 가능 

 

React 특징 - 2

Virtual DOM 사용

• 빠른 화면 출력 속도

 

vs jQuery를 이용한 화면 구성 (일반dom 사용)

    • 간결한 코드로 화면 구성 가능 (남이 이미 코딩 다 해놓음)

    • 화면의 일부분만 수정되어도 화면 전체를 다시 그려야 함

 

React 특징 - 3

JSX 문법 사용

• 자바스크립트 안에서 HTML 문법을 사용하여 view를 구성할 수 있도록 도와주는 문법

(html과 자바스크립트 혼합해서 사용)

코드를 알아서 자바스크립트 코드로 바꿔줌. 자바스크립트에서는 create elemts div 이런거 다 써야하는데 리액트에서는 안 써두 됨 짱짱 편함

 

React 개발 환경 구축

 

1. Node.js 설치

 

2. create-react-app 명령어로 프로젝트 생성

• 프로젝트 이름 : react-app

npx create-react-app react-app 

(밑줄자리는 프로젝트 이름으로 해당 프로젝트 이름으로 설정, react라고만 쓰면 안 됨)

 

※달러기호는 쓰는거 아님 (터미널 사용하라는 표시일 뿐)

 

폴더를 직접 추가하는 것이 아니라 자기가 사용하고 싶은 폴더 (경로설정)하고 터미널 열어서 경로 확인 하고 npx create-붙이고 싶은 폴더명 - 붙이고 싶은 폴더명 쳐야 함

(react라고만 이름지으면 안 됨 - 충돌 가능성 있기 때문 그래서 뒤에 -app 붙여준 거) 

 

그래서 깔리면 터미널에 냅다 npm start 치면 안 됨! 

cd (change 디렉토리) + 가고싶은 자식 폴더 이름 쳐서 경로를 설정해주고 npm start 입력

cd react-app

~/react-app : npm start

난 냅다 쳐서 오류나서 당황했는데 경로설정 짱 중요

 

ctrl + c : 리액트 서버 꺼짐

끄기 전 까지는 터미널에 아무것도 안쳐짐

 

리눅스 명령어

pwd - 현재 폴더의 위치가 어디있는지 알려주는 명령어

ls - 현재 내폴더 안에 뭐가 있는지 알려주는 명령어

clear - 화면 지우기

cd - 디렉터리 이동 내 부모폴더나 자식 폴더로 가기 위해서는 cd 사용

cd .. - 부모티렉터리로 이동 cd랑 점 사이에 한 칸 띄기

cd 자식폴더이름 - 자식 디렉터리 cd랑 폴더이름 사이에 한 칸 띄기

cd ~  - 홈 디렉터리로 이동  cd랑 물결 사이에 한 칸 띄기

 

 

reactjs code snippets 설치

코드를 자동 완성해주는 플러그인

 

비주얼코드에서 설치 - 앞으로 컴포넌트 만들기 위해서 기본적으로 작성해야하는 구조를 자동으로 완성해줌

 

* app.js가 메인이라 다른 컴포넌트들 src폴더 안에서 마음대로 만들고 메인에서 불러주기만 하면 됨

 

---

 

JSX(JavaScript XML)

자바스크립트에 XML을 추가한 확장형 문법

 

특징

• 하나의 파일에 자바스크립트와 HTML을 동시에 작성할 수 있어서 편리함

• 개발자는 화면에만 집중해서 개발 가능

• 리액트 엔진이 JSX를 내부적으로 자바스크립트 코드로 변 환시켜서 작동시킴

 

예시)

자바스크립트 코드와(빨간색) html코드 (초록색)

자바스크립트로만 하려면 document.createElement("div")랑 innerhtml 등등 사용해야 함 (코드가 너무 길어지고 어려움)

 

 

JSX를 사용하는 이유

 

✔️코드량 감소

 

리액트 엔진이 JSX를 내부적으로 자바스크립트 코드로 변환

 

가독성 향상

   • 중첩된 선언형 구조를 잘 나타냄

 

팀의 생산성 향상

   • HTML과 비슷하여 전문 개발자가 아니더라도 직접 코드 수정 가능

 

React 동작 원리

- 작성된 코드를 리액트가 자바스크립트를 이용하여 해석

 

src/index.js 파일

 

리액트가 화면을 그리는 방식

추가 및 제거되는 element(태그)만 업데이트 (바뀐 애들만 업데이트)

 

 

JSX 문법 작성 규칙

반드시 하나의 부모 태그로 감싸는 형태여야 함

버츄얼 돔이 효율적으로 빠르게 작동하게 하기 위해  하나의 부모 태그 아래 다수의 자식 태그를 써야함

 

 

※ 의미 없는 태그인 경우, <> 이렇게 작성 가능

 

자바스크립트 표현식은 {} 괄호로 감싸는 형태여야 함

리턴 안에 일반적으로 태그만 있어야 함!

리턴 위에 자바스크립트 코딩 (변수에 넣고 그 변수의 이름을 괄호로 묶어주기)

 

if, for와 같은 구문은 사용할 수 없음 (return안에서는)

자바스크립트 표현식이 아니기 때문

 

방법 1) 조건부 연산자(삼항 연산자)를 사용

자바스크립트 표현식이라 중괄호로 묶어 놓음

일치하면 선생님 그렇지 않으면 학생

 

 

방법 2) AND 연산자(&&)를 사용

  • 특정 조건을 만족할 때 내용을 보여주고, 만족하지 않을 때 아무것도 렌더링하지 않아야 하는 경우에 사용

 

HTML 태그는 반드시 닫아야 함

 

• XML 마크업 규칙을 따르기 때문

 

• HTML의 경우 다음 태그들은 닫지 않아도 됨

    • <img>. <br>, <input> 등

    • JSX의 경우 태그를 닫지 않으면 에러 발생

 

class 대신 className을 사용

• class는 자바스크립트의 예약어이기 때문에 사용할 수 없음

      →   JSX에서는 className을 사용

 

CSS Style

• JSX에서 태그에 style을 적용할 때는 객체 형태로 작성

• 속성 이름은 카멜 표기법으로 작성

 

 

주석

• JSX 내에서는 {/*...*/}와 같은 형식으로 사용

리턴 밖에서는 자바스크립트라 // 이렇게 사용됨

 

컴포넌트란?

컴포넌트 - 내가 직접 만든 태그

 

기존 웹 프레임워크 동작 방식

 

컴포넌트

 

리액트로 만들어진 앱을 이루는 최소한의 단위

 

특징

   • UI를 독립적으로 구성하여 재사용 가능

   • 기존 컴포넌트를 통해 새로운 컴포넌트를 쉽게 생성 가능

 

구성

   • 프로퍼티(props)

   • state

   • 컨텍스트

 

선언 방식

   • 함수형 컴포넌트

   • 클래스형 컴포넌트

 

 

 

컴포넌트 생성 및 사용

컴포넌트 생성하기

TodaysPlan 컴포넌트 생성(첫글자는 대문자)

src/TodaysPlan.js

js 자리에 jsx라고 붙여도됨 (아이콘 모양이 바뀌는데 순수 자바스크립트로 만든 것과 구분할 때 유용)

 

TodaysPlan 컴포넌트 사용 

src/App.js

 

실행 결과)

 

실습) 컴포넌트 생성해보기

src 폴더 내에 components 폴더 생성

components 폴더 내에 js 파일 생성

• CreateHeader.js

• CreateBody.js

• CreateFooter.js

 

실행 결과)

 

 

실습) 생성한 컴포넌트 사용하기

실행 결과)

 

---

 

프로퍼티(properties)란?

프로퍼티(properties)의 필요성

영화 목록을 컴포넌트로 표현한다고 가정

1. Movie 컴포넌트 생성 후 영화 정보 입력

 

2. App.js 컴포넌트에서 Movie 컴포넌트 3번 사용

 

실행 결과)

 

해결 방법

• Movie 컴포넌트는 1개만 생성

• App.js에서 Movie 컴포넌트에 필요한 데이터를 전달

프로퍼티(properties)

• 상위 컴포넌트에서 하위 컴포넌트로 전달되는 읽기 전용 데이터

    • 단방향 데이터 흐름

• 프로퍼티 값은 수정이 불가능 함

• properties를 줄여서 props라고도 함

 

전달 방법

전달하려는 속설명 : 변수이름

 

프로퍼티 값 자료형

문자열

• 큰따옴표(“”) 사용

 

문자열 이외의 값

• 숫자, 불리언, 배열, 객체, 함수 등

• 중괄호 사용

 

프로퍼티 값 전달 및 조회

props를 통해 하나의 값 전달하기

데이터 조회하기

• FirstProps.js

 

데이터 전달하기

• App.js

 

props를 통해 하나의 값 전달하기

실행 결과)

 

props를 통해 여러 개의 값 전달하기

데이터 조회하기

• FirstProps.js

 

데이터 전달하기

• App.js

 

실행 결과)

 

props 값 간결하게 조회하기

비구조화 할당(=구조 분해) 문법 사용

1)

 

2) 이 방법을 더 일반적으로 많이 사용

 

클래스형 컴포넌트에서 props 사용

데이터 전달하기

• App.js

 

데이터 조회하기

• ClassProps.js

 

실행 결과)

 

불리언 프로퍼티

불리언 프로퍼티 사용하기

• 불리언 값은 특별한 방법으로 전달 가능

    • true는 프로퍼티의 이름만 선언함

    • false는 프로퍼티의 이름을 생략함

 

BooleanComponent.js

 

App.js

 

실행 결과)

 

 

---

 

[실습회고]

리액트를 처음 배우는 거라 그런지,, 설치부터 코딩까지 정말 하~나두 쉬운게 없었던 나날들 ,, ㅎ 심지어 주석처리했던거를 다 해제했더니 뭐가꼬여서 3번 지우고 3번 설치했다 근데 리액트는 함부로 깔고 지우고 하면 안됨 ,,, 짱오래 걸림 ,, 리액트,, 너 뭐 돼? 여튼 실습문제를 푸는데 이 파일 경로때문인지 뭔지는 몰라도 2번이 영 안풀리는 것임(app.js와 컴포넌트들을 구분해서 하는 방법으로 했더니 뭐가 잘 안맞아서 안 됨) 그래서 담날 아침에 다시 보니까 import로 호출이 안 되고 있고 막 파일명 뒤집느라 제대로 된 파일을 호출하고 있지 않음 ,,,  그래서 다 수정하였더니 잘 되었다고 한다  ^-^

근데 왕기초 문제 푸는 것 같은데 나... 왤케 못함ㅜ 그러나 지금 포기할 수 없어 ,,, 어떻게든 이겨줄게 리액트,,

 

 

 

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 6주차 블로그 포스팅