[새싹 x 코딩온] 웹 풀스택 영등포 5기 11주차 회고 - 2

용가리🐉·2023년 10월 10일
리액트부트캠프웹코딩교육코딩온
0

[새싹 x 코딩온] 웹 풀스택 영등포 5기

목록 보기
9/22
post-thumbnail

📌 JSX

  • 앞선 회고록에서 React의 특징으로 간단히 소개!
  • JavaScript + XML
    • 자바스크립트 확장 문법으로 XML과 유사
    • 바벨을 이용해 일반 자바스크립트 코드로 변환 (바벨이 뭔지 생각나지 않는다면 11주차-1 회고록으로 ㄱㄱ)

📣 1. 전체는 하나의 태그로 감싸기

html 태그는 항상 return 이후, 반드시 한 부모 요소가 전체 요소를 감싸는 형태!

  • 하나의 태그만 return할 때는 () 필요 X, 여러 개의 태그가 있다면 return() 괄호 내부에 작성해야 함
function App() {
  const str = 'hello';
  
  return (
      <div className='App'>
    	<span>{str}</span>
		<span>world</span>
      </div>
  );
}
export default App;

📣 2. HTML with JS

html을 작성하다가 중간에 JS 문법을 사용하고 싶을 때는 중괄호 {}로 감싸야 함!

const str = 'hello,';
return(
  <div className='App'>
  	<span>{str}</span>
  	<span>{str === 'hello,' ? 'world' : '세상'}</span>
	<div>
  	 {str === 'hello,' ? (<div><h2>react</h2></div>) : (<div><h2>리액트</h2></div>)}
  	</div>
  </div>
);
  • JSX 삼항연산자 대신 if문 사용 X (+ for 문)
    • for문과 if문을 사용하고 싶다면, return이 오기 전에 결과값을 저장하고 사용
const numbers = [1,2,3,4];
let sum = 0;
for (let num of numbers)
  sum += num;

export default function App(){
  return <span>{sum}</span>;
}

📣 3. 인라인 style 적용

CSS를 인라인 형태로 적용할 때는 {object}형태로 저장!

  • CSS 속성은 camelCase로 변경 (기존에는 dash-case)
  • 백엔드에서 -를 보면 혼동할 수 있기 때문에 변경됨
export default function App() {
  return <div style={{ fontSize: '32px', backgroundColor: 'crimson' }}>인라인 스타일</div>;
}
  • return 위에 object를 변수에 담아놓고 사용할 수도 있음
export default function App() {
  const divStyle = { fontSize: '32px', backgroundColor: 'crimson' };
  
  return <div style={divStyle}>인라인 스타일</div>;
}

📣 4. class와 onclick

  • 소소한 태그명의 변화
    class → className='클래스 이름'
    onclick → onClick={클릭되었을 때 실행할 JS 코드}
  • 클래스 이름도 따로 선언하여 className={class-name}처럼 사용가능
return(
  <div className='App' onClick={()=>{alert('hi')}}>
  	<span>{str}</span>
  	<span>wordl!!</span>
  </div>
);

📣 5. closing tag

opening tag(빈태그)도 closing tag가 필요함

export default function App(){
  return(
    <div>
    	<input type='text' />
    	<input type='text'></input>
    	<br />
    	<br></br>
    	<img src={~} alt='alt' />
    	<img src={~} alt='alt'></img>
    </div>
  );
}

📣 6. 주석

export default function App(){
  
  /* return 밖에서의 주석 (기존의 JavaScript와 동일) */
  
  return(
    <div>
    {/* return 내부에서의 주석 */}
    </div>
  )
}

📌 리액트의 디버깅

기존 JavaScript에서, 에러 확인을 위해 console 창을 봐야했으나 React는 치명적인 버그일 경우 화면에 바로 띄워줌!

  • JavaScript의 문제점을 보완하고자 strict mode 강제 → 어디서 실수 했는지 자세히 제공

📌 Props

properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소

  • props는 컴포넌트끼리 값을 전달하는 수단
  • 상위 컴포넌트 → 하위 컴포넌트로 전달 (단방향 데이터 흐름)
{/* 일반 사용법 */}
<ClassComponent />
  
{/* props 사용법 */}
<ClassComponent title="제목" content="내용" />

📣 함수형 컴포넌트 props

  • 부모 컴포넌트에서 전달한 props는 함수형 컴포넌트에서 함수의 파라미터로 전달받음
  • JSX 내부에서 {}기호로 감싸서 사용함
// 부모 컴포넌트에서 name props 전달
<FuncComponent name="새싹" />
// 자식 컴포넌트에서 name props 받음
const FuncComponent = (props) => {
  return(
  	<>
    <div>안녕? {props.name}</div>
    <div>반가워!</div>
    </>
  )
}

🟠 defaultProps

부모 컴포넌트에서 props가 전달되지 않았을 때 기본값으로 보여줄 props 설정

// 부모 컴포넌트
<FuncComponent/>
// 자식 컴포넌트
const FuncComponent = (props) => {
  return(
  	<>
    <div>안녕? {props.name}</div>
    <div>반가워!</div>
    </>
  )
}

FuncComponent.defaultProps = {
  name: '홍길동'
}

🟠 props.children

부모 컴포넌트에서 자식 컴포넌트를 호출할 때 태그 사이에 작성한 문자열

// 부모 컴포넌트
<FuncComponent name="새싹">자식 내용</FuncComponent>
// 자식 컴포넌트
const FuncComponent = (props) => {
  return(
  	<>
    <div>안녕? {props.name}</div>
    <div>반가워!</div>
    <h4>{props.children}</h4>
    </>
  )
}

🟠 propTypes

컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때 사용

  • JavaScript의 유연한 특성을 해결하기 위해 권장되는 기능
  • 정해진 타입이 아닌 다른 타입으로 정보 전달 시, 제대로 동작하지만 console에 오류가 남
import PropTypes from 'prop-types';

FuncComponent.propTypes = {
  name: PropTypes.string
}

📣 클래스형 컴포넌트 props

class ClassComponent extends Component{
  render() {
    return(
      <h1>Class Component 입니다. 이름은 {this.props.name}</h1>
    );
  }
  
// 방법 1
  static defaultProps = {
    name: '기본 이름',
  };

  static propTypes = {
    name: PropTypes.string
  };
}

// 방법 2
ClassComponent.defaultProps = {
  name: '홍길동'
}

ClassComponent.propTypes = {
  name: PropTypes.string
}

📌 State

React에서 앱의 유동적인 데이터를 다루기 위한 개체

  • 계속해서 변하는 특정 상태(state)
  • 상태에 따라 다른 동작을 함
  • State가 변경될 시 자동으로 재랜더링 되기 때문에 사용됨 → 변수와 다른 점!
  • ex) 다트모드, 라이트모드 등에 사용된다지만, state 없는 리액트를 본적이,,,

state vs. props

  • props : 부모 컴포넌트에서 자식 컴포넌트에 데이터 전달 시 사용(읽기모드)
  • state : 특정 컴포넌트가 갖는 상태 (값)
    - 컴포넌트 내부에서 선언되고 내부에서 값을 변경함

📣 클래스형 컴포넌트의 state

🟠 기존 형태

import React, { Component } from "react";

class ClassState extends Component {
  constructor(props){
    super(props);
    
    this.state = {
      number: 0,
    };
  }
  render(){
    const { number } = this.state;
    return (
      <div> <h3>Number : {number}</h3> </div>
    )
  }
}

export default ClassState;
  • JavaScript에서 super는 부모 클래스 생성자의 참조
  • super() 호출 시, 현재 클래스가 상속받고 있는 리액트의 Component 클래스가 지닌 생성자 함수를 호출함

🟠 현재 버전

import React, { Component } from "react";

class ClassState extends Component {
  state = {
    number: 0,
  };
  render() {
    const { number } = this.state;
    return (
      <div> <h3>Number : {number}</h3> </div>
    );
  }
}

export default ClassState;

📣 함수형 컴포넌트의 state

  • 함수형 컴포넌트는 state 기능이 원래 없었음
  • React 16.8 버전 이후부터 useState 함수가 생김 → 함수형 컴포넌트에서도 상태관리 가능
import React, { useState } from 'react';

const FuncState = () => {
  const [ msg, setMsg ] = useState(""); // 상태의 초기값
  const onClickEnter = () => { setMsg("안녕하세용"); };
  const onClickLeave = () => { setMsg("안녕히가세용"); };
  
  return (
    <div>
    	<button onClick={onClickEnter}>입장</button>
    	<button onClick={onClickLeave}>퇴장</button>
		<h1>{msg}</h1>
    </div>
  );
};

export default FuncState;
  • 상태의 초기값은 형태가 자유로움(숫자, 문자, 배열 등)
  • useState는 함수는 배열 반환
    • 첫번째 원소 (ex. msg) : 현재 상태
    • 두번째 원소 (ex. setMsg) : 상태를 바꿔주는 setter 함수

📌 Event Handling

📣 React의 Event

🟠 HTML Event

<!-- 문자열 형식 호출문 등록 -->
<button onclick="antionEvent()">
  Event Button
</button>

🟠 JavaScript Event

// 괄호를 없애 함수를 바로 실행하지 않고, 
// 클릭이 발생했을 경우 함수가 호출됨
addEventListner('click', onClickEvent)

🟠 React Event

// 괄호를 없애 함수를 바로 실행하지 않고, 
// 클릭이 발생했을 경우 함수가 호출됨
<button onClick={activeEvent}>
  Event Button
</button>
  • 주의점
    • React의 이벤트는 카멜 케이스(camelCase) 사용
    • JSX를 사용해 이벤트 핸들러 전달 → 함수 자체를 전달
    • 기본 DOM 요소에만 이벤트 설정 가능

📣 React 합성 이벤트

  • Synthetic Event(합성 이벤트)

    • 브라우저 이벤트들을 포함하고 있는 리액트 고유 이벤트 객체

  • 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 Wrapper 객체

    Wrapping 이란?
    기본 기능을 감싸는 새로운 기능

  • 리액트가 DOM이 아닌 VirtualDOM을 사용하는 것처럼 웹 브라우저의 nativeEvent가 아닌 nativeEvent를 감싼 SyntheticEvent를 사용

📣 클래스형 컴포넌트에서의 이벤트

클래스형 컴포넌트에서는 this를 사용해야 함수를 찾아갈 수 있음 (state, props와 동일)

<button onClick={this.printConsole}>printConsole2</button>
<button onClick={this.handleConsole}>handleButton</button>

🟠 함수에서 this 사용하기

  • bind 사용하기
    • JavaScript에서는 this를 호출하는 방법에 의해 결정 → 함수가 호출될 때마다 this가 다를 수 있음
    • bind() 메서드는 호출되는 방법과 무관하게 this를 묶어버림
constructor(props) {
  super(props);
  
  this.eventExample = this.eventExample.bind(this);
}

eventExample(){
  console.log(this);
}
  • 화살표 함수 이용하기
    • 화살표 함수에는 this가 아예 없음
    • 선언될 시점에 상위 스코프가 this로 바인딩 됨
eventExample = () => {
  console.log(this);
}

🟠 함수에 인자 보내기

  • 화살표 함수 이용하기
<button onClick={() => onClickEvent("인자1")>클릭 이벤트</button>
<button onClick={(e) => onClickEvent2(e, "인자1")>클릭 이벤트</button>
  • bind 사용하기
<button onClick={onClickEvent.bind(null, "인자1")>클릭 이벤트</button>

📣 함수형 컴포넌트에서의 이벤트

🟠 함수에 인자가 없는 경우

<button onClick={increase}>더하기</button>

🟠 함수에 인자가 있는 경우

<button onClick={() => alertMsg('hello~')}>alert 출력</button>
<button onClick={(e) => consoleMsg(e, 'hello~')}console 출력</button>

e 객체

  • e 객체는 합성 이벤트
  • 사용 이유
    • 브라우저마다 이벤트 이름, 종류 등 이벤트를 처리하는 방식이 다르기 때문
profile
용가리🐉
자아를 찾아 떠나는 중,,,
이전 포스트

[새싹 x 코딩온] 웹 풀스택 영등포 5기 11주차 회고 - 1

다음 포스트

[새싹 x 코딩온] 웹 풀스택 영등포 5기 12주차 회고 - 1

0개의 댓글

관련 채용 정보