20230613 TIL(리액트,JS문법들,리액트 프로젝트 실습, JSX와 컴포넌트)

뿌링클 치즈맛·2023년 6월 13일
JSXReactTIL
0

Elice AI트랙 8기

목록 보기
20/28
post-thumbnail

React 리액트

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리.

Component

  • React에서 서비스를 개발하는 데 있어 독립적인 단위,쪼개어 구현

Virtual DOM

  • 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념. 버츄얼 돔으로 그린 화면과 현재 사용자가 보고 있는 화면을 비교한 뒤 바뀐 부분만 지우고 다시 그려주는 기능.

JSX

  • JavaScript 내에서 UI를 작성하기 위해 개발자에게 익숙한 환경을 제공, HTML과 유사함.생산성이 높아진다. React 개발을 위해 반드시 JSX를 사용할 필요는 없으나 효율을 위해 JSX사용을 권장한다.

SPA(Single Page Application)

전통적인 페이지(MPA)에 로그인 할 경우, 최초에 서버로부터 HTML을 전달받고, 로그인을 위해 아이디와 비밀번호를 Form에 담아 서버에 전달한 후 HTML을 다시 클라이언트에 전달하고 페이지가 리로드된다.
SPA는 HTML을 서버가 최초로 전달하는 것은 같지만, 데이터를 서버에 전달하면 서버가 JSON파일로 데이터를 전달받는다.

리액트의 장점
1. 컴포넌트와 훅을 활용해 개발자의 생산성과 코드 재사용성이 높다.
2. 오픈소스 라이브러리 제공,풍부한 자료
3. 리액트를 웹 이외에 React-Native에 적용해 안드로이드/IOS 앱을 개발할 수 있다.

Component

const App=()=>{
  const txt='hellow world';
  return <h3>{txt}</h3>; //jsx를 반환

리액트는 위 코드와 같이 html과 js를 섞어 작성할 수 있다. 이러한 형태로 하나의 블록을 만들어 필요한 곳에 조립해 개발하는 컴포넌트라고 한다.

State

const [todoList,setTodoList]=useState([])
const [inputValue,setInputValue]=useState('')

구조분해 할당으로 useState에 배열의 요소들을 넣어준다.
State를 이용해 컴포넌트 내에서 데이터를 유동적으로 관리한다. State가 변경될 때마다 컴포넌트가 다시 렌더링 된다.

var ->const&let

const c=7;
c=6//error!

const: 한 번 선언하면 값을 바꿀 수 없는 상수.
const로 선언된 변수는 같은 스코프(중괄호) 내에서 중복된 이름을 가질 수 없다. 에러를 출력하기 때문에 실수시 디버깅이 쉬움.

let: 선언과 변경이 자유로운 변수. 변수의 변경이 필요할 때만 사용하는 것을 추천

Array 메서드

아래의 세 메서드는 배열 내의 요소를 꺼내 순차적으로 작동한다는 공통점이 있다.

forEach

var a=[0,1,2,3,4,5];
for(var i=0;i<a.length;i++){
  var item=a[i];
  console.log(item)

이전에는 for문을 사용해 배열에 있는 요소를 하나씩 꺼내왔다. 하지만 forEach를 사용하면 코드를 보다 간결하게 적을 수 있다.

const b=[0,1,2,3,4,5];
b.forEach(function(item){
  //item으로 배열의 요소를 받음
  console.log(item)

forEach: 배열의 요소를 이용해 순차적으로 함수를 실행하는 메서드
Array.forEach에 실행할 콜백 함수는 현재 값, 인덱스, forEach를 호출한 배열을 매개변수로 받는다.
또한 함수 내에서 따로 return을 할 필요가 없다.

map

var c=[0,1,2,3,4,5]
var newC=[]
for(var i=0;i<c.length;i++){
  var item=c[i]
  newC.push(item*2)

for문을 돌려 c의 값에 2를 곱한 것을 새로운 배열 newC에 넣었다.
newC를 선언하고 배열c의 요소값을 item으로 따로 받아야 해서 코드가 길다.

const d=[0,1,2,3,4,5];
const newD=d.map(function(item){
  return item*2;
})

배열의 각 요소에 대하여 주어진 함수를 수행한 결과(return된 값)를 모아 새로운 배열을 반환하는 메서드.Array.map에 실행할 콜백 함수는 현재 값, 인덱스, map을 호출한 배열을 매개변수로 받는다.
요소들에게 일괄적으로 함수를 적용하고 싶을 때 사용하기 적합하다.
함수내에서 반드시 새로운 값을 return을 해주어야 한다.

filter

var c=[0,1,2,3,4,5]
var newC=[]
for(var i=0;i<c.length;i++){
  var item=c[i];
  if(item>3){
    newC.push(item)}
}
const d=[0,1,2,3,4,5];
const newD=d.filter(function(item){
  return item>3; //3이 넘는 값만 반환한다.
  //반환된 값은 newD 배열의 요소로 들어간다.

배열의 요소를 이용해 순차적으로 함수를 실행하여 조건(item>3)을 통과하는 요소를 모아 새로운 배열로 반환하는 메서드. 함수 내에서 false를 return할 경우 새로운 배열에서 제외되고 true를 return할 경우 새로운 배열에 추가된다.
filter에 실행할 콜백 함수는 현재 값, 인덱스, map을 호출한 배열을 매개변수로 받는다. 쉽게 말해서 함수의 조건에 일치하는 것만 뽑아내 새로운 배열을 만들어주는 메서드다.

Arrow Function

const c=function(x,y){
  sum=x+y;
  console.log(x,'+',y,'=',sum);
}

기존의 함수는 function 키워드와 중괄호 { } 가 필수적이었다.

const c=(x,y)=>{
  sum=x+y;
  console.log(x,'+',y,'=',sum);
}

화살표 함수는 function키워드를 생략하고 매개변수를 받은 뒤 =>를 사용한다. 중괄호로 로직을 작성할 수 있다.

const c=(x,y)=> console.log(x,'+',y,'=',x+y);

return값만 존재하는 짧은 함수의 경우에는 중괄호,return을 모두 생략하고 바로 return할 값(console.log(x,'+',y,'=',x+y)을 입력할 수 있다.

Destructing Assignment 구조분해 할당

var Obj1={name:'kim',job:'student',age:26}
var name=Obj1.name
var job=Obj1.job
var age=Obj1.age

일일이 name,job,age 변수를 설정하기 위해 Obj1에서 값을 가져와야 한다. name 변수로 Obj1.name을 할당하지 않으면 그 값을 사용할 때마다 Obj1.name을 적어야 하니 불편하다.

const Obj1={name:'kim',job:'student',age:26}
//위에서 Obj1을 선언하고 초기화해줘야 한다.
const{name,job,age}=Obj1
//name,job,age라는 변수를 Obj1에서 가져와 할당함

앞에 Obj1 없이 name,job,age만 입력해도 콘솔에서 값을 확인할 수 있따.
객체나 배열을 해체하여 개별 변수에 담을 수 있게 하는 표현식이다.
기존에는 객체에 담긴 값을 각각 새로운 변수로 선언하기 위해 왼쪽 예시와 같이 작성하였지만 구조 분해 할당을 이용하여 더 간편하게 코드를 작성할 수 있다.

var c=[1,2,3]
var c0=c[0]
var c1=c[1];
var c2=c[2]
const d=[1,2,3]
const [d0,d1,d2]=d;

기존에는 배열에 담긴 값을 각각 a, b에 담기 위해 왼쪽 예시와 같이 표현하였지만 Destructuring Assignment 표현을 이용하여 더 간편하게 코드를 작성할 수 있다.

Shorthand Property Names 단축 속성명

const username='김개발'
const age=21;
const school='엘리스';

//Past
var student1={username:username,age:age,school:school};

//Now!
const student2={username,age,school}

단축 속성명을 이용해 새로운 객체 선언을 간편하게 할 수 있다.
새로 선언하는 object에 key값과 동일한 변수명(username,age,school)을 가진 변수를 할당할 경우 value 값을 생략해서 적을 수 있다.

Spread Syntax 전개 구문...

const arr=[1,2,3]

function getSum(...n){ //1
  let sum=0;
  n.forEach((item)=>{
    sum+=item;})
  return sum;
}

getSum(...arr)//2

const newArr=[0,...arr,4,5,6]

1) 배열의 값을 ...n으로 배열 요소의 개수를 신경쓰지 않고 받아 getSum에 넣어줬다. n.forEach에서 n이 배열임을 알 수 있다.

2) getSum함수에 배열 arr의 요소들을 전개해서 매개변수로 넘겨준다.

3) 배열 arr의 요소들을 전개해 newArr라는 배열에 넣어준다.

const Kim={name:'김개발',age:23,school:'Elice'}
const newUser={...Kim,grade:3,age:21}

Kim에 있는 name,age,school 값을 가져와 새로운 객체를 만든다.
newUser에 Kim의 키와 값을 넣고, age는 같은 것이 두 개 있으니 뒤에 있는 값을 넣는다.
두 객체를 합성할 때 겹치는 key가 있을 경우 나중에 오는 값이 들어간다.

Template Literals


const name='Kim'
//Past
const t1='Hello'+name;
//Now
const t2=`Hello ${name}`

Template literals(템플릿 리터럴)은 표현식을 허용하는 문자열 리터럴이다. 백틱으로 문자열을 감싸면 된다. 문자 내에 표현식을 사용하기 위해서는 ${ }를 표기한다.

Optional Chaining

//a객체 안에 b 객체가 있고 그 안에 c값이 들어간 상황
//Past
var x;
if(a&&a.b&&a.b.c){
  x=a.b.c;}

//Now
const y=a?.b?.c;

a?.b?.c; 는 a안에 b가 있나? b안에 c가 있나? 로 이해했다.
Optional chaining 연산자는 객체나 변수에 연결된 다른 속성을 참조할 때 유효한 속성인지 검사하지 않고 값을 읽을 수 있도록 해준다.
만약 유효한 속성이 아닐 경우에는 에러를 발생시키지 않고 undefined를 반환한다. 배열의 경우 array?.[index] 와 같이 사용할 수 있다.

Create React App

React 프로젝트를 손쉽게 생성할 수 있도록 도와주는 ‘보일러플레이트(Boilerplate)다. 템플릿같은 거라고 생각하면 된다.
수많은 React용 보일러플레이트가 있지만 Facebook에서 직접 만들어서 관리하는 Create React App이 가장 많이 쓰임.(리액트를 만든게 페북이니까)
jQuery 라이브러리를 사용하는 것 처럼 직접 script를 추가해서 사용해도 되긴 하다. Node.js 환경 위에 구축된다.

프로젝트 생성에 필요한 다양한 기능을 Command로 제공함

장점
1. 개발자가 온전히 React App 개발에 집중할 수 있도록 함

  • 상대적으로 덜 중요한 코드는 노출되지 않음
  • 강력한 Command 지원
  1. (대부분의) 모든 브라우저에서 해석될 수 있도록 transcompile 지원
  • Babel 내장(transcompile Library)
  • 배포 시 코드 번들링, Webpack

Node.js / NPM

Create React App으로 React 프로젝트 시작 시 Node.js 개발 환경을 제공한다.

Node.js

서버 프로그래밍에 사용되는 JavaScript 기반의 소프트웨어 플랫폼. 서버 사이드 코드를 자바스크립트로 개발해 새로운 언어의 학습 없이 자바스크립트만으로 프론트엔드 개발자가 서버 개발을 할 수 있는 환경이 마련됨. HTTP 통신 관련 라이브러리가 내장되어있고 npm을 통한 방대한 라이브러리가 제공된다. Create React App으로 프로젝트를 생성할 경우, 개발환경 및 테스트 서버로 이용된다.

npm
Node Package Manager 노드 패키지 매니저
Node.js 환경에서 사용하는 각종 패키지들을 관리하는 저장소다. Node.js 설치시 함께 설치된다.패키지 관리 뿐만 아니라 서버 실행 및 관리에 필요한 다양하고 편리한 명령어를 제공한다.React와 관련된 모듈들이 NPM에서 배포되고 있다.

npx
npm 패키지를 1회성으로 내려 받아 실행할 때 사용하는 명령어

프로젝트 폴더 내 디렉토리 구조 살펴보기

./node_modules/
npm을 이용해 설치한 패키지들 모음

./public/
정적인 파일들을 모아 놓는 곳(index.html)

./src/
리액트 개발을 위한 파일들을 모아 놓는 곳(App.css,App.js 등)

./.gitignore
Git을 이용할 경우 불필요한 파일을 무시할 수 있도록 하는 설정파일 (npm 패키지들은 각 사용자마다 설치 상태가 다르기 때문에 보통 node_modules 폴더를 gitignore에 넣어줌)

./package.json
프로젝트에 관한 정보와 사용하는 패키지들을 명세하는 파일

./README.md
내 프로젝트에 관한 설명을 작성하는 파일

라이브러리 설치와 불러오기

npm install package.json //파일 내에 정의된 패키지 모두 설치
npm install <패키지명> //npm 서버로부터 패키지 내려받기
npm install <패키지명>@<version> //특정 버전의 패키지 내려받기
npm install <Git 레포지토리 주소> //npm이 아닌 Git 레포지토리로부터 패키지 내려받기

npm install로 패키지를 내려받는다.

{
  'dependencies':{
    '@testing-library/react':'^1.0.2',
      'react':'^17.0.2'
  }
}

설치한 패키지들은 package.json의 dependencies라는 키 아래에서 확인할 수 있다.
^(캐럿)은 가장 최신의 버전을 설치해 달라는 의미다.

import 'packagename'

import something from 'packagename'

import {a,b} from 'packagename'

import * as something from 'packagename'

  1. CSS나 import하는 것 만으로 역할을 하는
    라이브러리인 경우 패키지명을 바로 import 한다. (import './App.css')

  2. 기본적으로 패키지를 불러와 활용할 때에
    는 할당할 이름을 작성한다.
    (import React from "react";)

  1. 패키지 내의 일부 메소드나 변수만 가져올
    때는 구조분해를 하여 가져오는 것이 효율
    적이다.

  2. 패키지에 default로 export되는 객체가 존
    재하지 않을 경우 * as 이름 으로 불러올 수
    있다. 마지막에 export ~문이 없으면 사용한다.

JSX와 컴포넌트

JSX
함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JavaScript의 확장. 자바스크립트 내에서 html 코드를 사용할 수 있다. 하지만 문법이 동일하지는 않다.
JSX 없이 JS로만 리액트를 개발하려고 하면 .createElement 지옥이 될 것이다.

  1. HTML 태그 내에 JavaScript 연산

  2. class → className (자바스크립트 내에서 class를 사용하기 때문, <div className='color'/ >)

  3. 스타일은 object로 작성한다. 프로퍼티의 이름은 camelCase로 적는다. (paddingLeft,backgroundColor)
    style={자바스크립트 사용하겠다~{자바스크립트 오브젝트 시작 padding:10,color:'violet

  4. 닫는 태그 필수 (input,br태그도 닫아줘야 한다. <input/>, <br/>

  5. 최상단 element는 반드시 하나

  const App=()=>{
  return (
  <div> Hello</div>
  <div> World</div>
  )

최상단에 있는 요소는 하나만 있을 수 있다.

const App=()=>{
return (
	<> //React.Fragment
		<div> Hello</div>
		<div> World</div>
	</>
)}

실제 렌더링시에는 <> </> 사이의 내용이 출력된다.

컴포넌트

  1. React에서 페이지를 구성하는 최소단위
  2. Component의 이름은 대문자로 시작한다. 새로 만들어진 태그인지, HTML 태그인지 헷갈리기 때문이다.
const MyComponent=({children})=>{
  return <div style={{
      padding:20,
        color:'blue'}}>
    {children}
    </div>
}

const App=()=>{
  return (
    <>
      <p> Hi</p>
      <MyComponent>Nice2MeetU</MyComponent>
    </>
)}

컴포넌트를 만들고 다른 컴포넌트에서 자유롭게 사용할 수 있다.

  1. Class Component / Function Component 로 나뉨

Class Component

class Hello extends Component{
  render(){
    const {name}=this.props
    return <div>
      Hello {name}
      </div>
  }}

클래스 컴포넌트. 클래스 개념이 많이 활용되는 자바 개발자에게 친숙한 형태다. 리액트의 생명주기를 파악하기 쉽다.

Function Component

const Hello=(props)=>{
  const {name}=props
  return <div>
    Hi, {name}
    </div>
}

함수 컴포넌트. 주로 사용된다.

  1. Controlled Component / Uncontrolled Component
<MyComponent user={{name:'민수'}} color='blue>
 <div> 안녕하세요
 </div>
                                       </MyComponent>

컴포넌트에 Attribute에 해당하는 부분(user=~blue>을 Props(Properties)라고 한다. 그 아래에 있는 <div>와 같은 컴포넌트 안에 작성된 하위 Element를 children이라고 한다. children도 결국 props 중 하나다.

const MyComponent=(props)=>{
  const {user,color,children}=props //props에 구조분해 할당
  return (
    <div style={{color}}>
      <p>{user.name}님의 하위 element는 </p>
      {children}
      </div>
profile
뿌링클 치즈맛
뿌링클 치즈맛
이전 포스트

20230612TIL(리액트 입문, 코드 복붙함)

다음 포스트

20230615 TIL(Props,State,이벤트처리)

0개의 댓글