JDBC는 자바 언어를 사용하여 관계형 데이터베이스에 접근하고 조작하기 위한 표준 API이다. Java 기반 애플리케이션의 데이터를 데이터베이스에 저장 및 업데이트하거나, 데이터베이스에 저장된 데이터를 Java에서 사용할 수 있도록 한다.

JDBC는 Java 애플리케이션에서 데이터베이스에 접근하기 위해 JDBC API를 사용하여 데이터베이스에 연동할 수 있으며, 데이터베이스에서 자료를 쿼리(Query)하거나 업데이트하는 방법을 제공한다.

JDBC 표준 인터페이스 기능

1. java.sql.Connection - 연결
2. java.sql.Statement - SQL을 담은 내용
3. java.sql.ResultSet - SQL 요청 응답

JDBC API 사용 흐름

1. JDBC 드라이버 로딩 : 사용하고자 하는 JDBC 드라이버를 로딩한다. JDBC 드라이버는 DriverManager 클래스를 통해 로딩된다.

2. Connection 객체 생성 : JDBC 드라이버가 정상적으로 로딩되면 DriverManager를 통해 데이터베이스와 연결되는 세션(Session)인 Connection 객체를 생성한다.

3. ** Statement 객체 생성** : Statement 객체는 작성된 SQL 쿼리문을 실행하기 위한 객체로 정적 SQL 쿼리 문자열을 입력으로 가진다.

4. Query 실행 : 생성된 Statement 객체를 이용하여 입력한 SQL 쿼리를 실행한다.

5. ResultSet 객체로부터 데이터 조회 : 실행된 SQL 쿼리문에 대한 결과 데이터 셋이다.

6. ResultSet, Statement, Connection 객체들의 Close : JDBC API를 통해 사용된 객체들은 생성된 객체들을 사용한 순서의 역순으로 Close 한다.

참고자료 🙇🏻‍♂️ https://ittrue.tistory.com/250 https://hye0-log.tistory.com/15

MyBatis와 JPA 모두 DB연동, 저장을 위한 기술이지만 서로 다른 접근법을 가진다. MyBatis는 SQL Mapper 기술을 제공하며, JPA는 ORM(Object Relational Mapping) 기술을 제공한다.

해당 포스트는 데이터베이스를 효율적으로 사용하기 위한 MyBatis와 JPA 기술을 각각 정리해보려고 한다.

MyBatis

MyBatis는 반복적인 JDBC 프로그래밍을 단순화하여 객체지향 언어인 자바의 관계형 데이터베이스 프로그래밍을 쉽게 할 수 있게 도와주는 프레임워크이다.

• 개발자가 작성한 SQL 문을 Java 객체로 자동으로 매핑 시킨다.
• JDBC를 통해 데이터베이스에 엑세스하는 작업을 캡슐화하고 일반 SQL 쿼리, 저장 프로 시저 및 고급 매핑을 지원하며 모든 JDBC 코드 및 매개 변수의 중복작업을 제거한다.
• 프로그램에 있는 SQL쿼리들을 한 구성파일에 구성하여 프로그램 코드와 SQL을 분리할 수 있어 관리가 용이하다.
• Java 소스코드에서 SQL 문을 분리하여 별도의 XML 파일로 저장하고, 이 둘을 자동으로 연결시켜주는 기능을 제공한다. (Java 메소드와 SQL 간의 매핑하고, 분리된 SQL문을 MyBatis가 찾아 실행)

MyBatis 특징

• 개발자는 Java 메소드 선언과 SQL 문만 만들면 MyBatis가 자동으로 연결시켜 빠른 개발이 가능하며 생산성이 향상된다.
• 복잡한 쿼리나 다이나믹한 쿼리에 강하다.
• 기존 SQL 문장이 Java 코드 내에 함께 존재하던 방식과 달리, Java 코드와 SQL 쿼리의 분리로 코드의 간결성 및 유지보수성이 향상된다.
• resultType, resultClass등 Vo를 사용하지 않고 조회결과를 사용자 정의 DTO, MAP 등으로 맵핑하여 사용할 수 있다.

다음으로는 JPA(Java Persistence API)에 대해 알아보겠다.

JPA

JPA는 Java 객체와 관계형 데이터베이스 간의 매핑을 위한 프레임워크이다. JPA는 ORM(Object-Relational Mapping)을 구현하는 자바 표준 스펙으로, 개발자가 객체지향 프로그래밍 언어에서 사용하는 객체 모델과 관계형 데이터베이스의 테이블 간의 매핑을 자동으로 처리해 준다.

MyBatis와 같이 SQL 문과 Java 코드를 연계하는 방식이 아니라 Java 객체와 DB 엔티티(테이블) 자체를 그대로 매핑해서 처리할 수 있는 접근 방식이다.

데이터베이스는 데이터 중심의 구조를 가지고 있고, Java는 객체지향적인 구조로 관리되기 때문에 둘 사이에 데이터를 직접적으로 쉽게 가져오거나 저장하는 방법은 어려웠다. 이 문제를 해결하기 위해 JPA는 ORM 기술을 사용한다.

ORM(Object Relational Mapping)은 객체와 관계형 데이터베이스(테이블) 간의 데이터를 매핑하기 위한 기술이다. 객체 지향 프로그래밍에서 사용되는 객체와 관계형 데이터베이스에서 사용되는 테이블 간의 차이를 해결하기 위해, 객체와 데이터베이스 간의 매핑을 자동으로 수행한다.

Java 개발자가 좀 더 객체지향 관점에서 개발할 수 있게 하고, 개발을 용이하게 해주어서 DB와 Java 간의 불일치를 해소할 수 있다.

JPA 특징

• MyBatis와 다르게 SQL 문의 작성이 불필요하며 ORM 내부적으로 java 메소드에 적합한 SQL 문이 자동으로 생성되어 실행된다.
• 개발자는 어떤 SQL이 실행될지 생각만하면 되고, 예측도 쉽게 할 수 있다.
• 객체와 관계형 데이터베이스 간의 매핑을 손쉽게 처리할 수 있으며 데이터베이스의 CRUD(Create, Read, Update, Delete) 작업을 간편하게 수행할 수 있다.
• SQL아닌 객체 중심으로 개발할 수 있어, 생산성이 좋아지고 유지보수도 수월하다.

어떤 프레임워크를 사용해야 할까?

복잡한 쿼리와 SQL 제어가 필요한 경우는 MyBatis로 개발할 수 있다. 기존 SQL 경험이 풍부하거나, 특정 데이터베이스에 최적화된 SQL 작성이 필요한 경우는 MyBatis를 선택할 수 있다.

간단한 매핑 및 객체 지향적인 접근이 필요한 경우는 JPA가 SQL작성 등의 반복적인 부분을 해결해 준다. 표준화된 인터페이스와 자동 매핑이 중요하며, 다양한 데이터베이스에 대응해야 하는 경우는 JPA를 선택하면 DB가 변경되더라도 유동적인 이동이 가능하다는 장점이 있다.

참고 링크 🙇🏻‍♂️ https://dbjh.tistory.com/77 https://velog.io/@cyseok123/MyBatis https://www.elancer.co.kr/blog/detail/231

전달인자로 다른 함수에 전달되는 함수

동기식 콜백은 중간에 비동기 작업 없이 외부 함수 호출 직후에 바로 호출,

비동기식 콜백은 비동기 작업이 완료된 후 나중에 호출됨

let value = 1;

doSomething(() => {
  value = 2;
});

console.log(value);

동기식 콜백 호출 경우 결과는 2,

비동기식의 경우 결과는 1

Synchronous Asynchronous

동기식, 프로그램이 직렬적으로 수행(task를 위부터 아래까지 순서대로)

→ 차례에 맞게 실행됨으로 순서를 예측하기 쉬움

비동기식, 병렬적으로 독립적으로 수행(순서대로 task를 실행하지 않음)

→ 동시다발적으로 실행되므로 예측 어렵고 혼란스러움, 그러나 빠른 장점

서버와의 통신(언제 끝날지 알 수 없는 작업들)은 비동기적으로 처리하는 경우가 많다

Promise

ex) javascript fetch api

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => response.json())
  .then((data) => console.log(data));

위의 fetch함수와 같이, 어떤 함수의 리턴값이 Promise이면, 그 작업은 비동기적으로 동작할 가능성이 크다.

이 함수가 리턴한 값은 2개의 method(.then, .catch)를 사용할 수 있다.

then과 catch는 모두 콜백 함수를 받고, 파라미터를 하나씩 가진다

성공했을 경우, then으로 전달된 함수가 실행되고 실패했을 경우 catch로 전달된 함수가 실행된다

리액트: 사용자 인터페이스를 만들기 위한 대표적인 자바스크립트 UI 라이브러리 (화면을 만들기 위한 기능들을 모아놓은 것)

라이브러리: 자주 사용되는 기능들을 정리해서 모아놓은것 → 흐름을 제어하지 않고 개발자가 필요한 부분만 가져다 쓰는 것

사용자 인터페이스(UI): 서로간의 입력과 출력 제어

Virtual Dom: 웹사이트의 모든 정보를 담음. 웹페이지를 정의하는 하나의 객체, 가상의 Dom으로 웹페이지와 실제 dom 사이의 매개체 역할을 함 (빠른 렌더링, 변경된 부분만을 다시 렌더링)

컴포넌트 기반의 구조→ 리액트로 구성된 페이지는 모두 컴포넌트로 이루어져 있음. 이는 재사용성을 높임 → 개발기간 단축, 유지보수 용이

리액트로 개발할 때 컴포넌트의 영역들을 잘 분리하여 재사용성이 높은 컴포넌트를 만드는 것이 중요

CRA

create-react-app(CRA) 리액트로 개발을 할 때 필요한 모든 환경설정이 되어있음

개발환경 설정시 필요한 환경 (Node.js설치, Npm설치, vscode)

npx(execute npm package binaries) Npm 패키지를 설치한 이후 곧바로 실행할 수 있도록 해 주는 명령어

vscode 터미널에서 실행할 수 있음

npx create-react-app my-app //project name

cd my-app //경로 변경(디렉토리 변경) 생성한 mt-app폴더로 이동
npm start //애플리케이션 실행

명령어 입력후 로컬 개발환경에서 리액트 애플리케이션이 실행 됨

JSX

A syntax estension to JavaScript 자바스크립트의 확장 문법

자바스크립트의 문법을 확장시킨 것 JavaScript + XML/HTML

const element = <h1>Hello, world!</h1>;

h1 태그로 둘러싸인 문자열을 element라는 변수에 저장

JSX의 역할

JSX는 내부적으로 xml, html코드를 자바스크립트로 변환하는 과정을 거침

Jsx로 코드를 작성해도, 최종적으로는 자바스크립트 코드로 나오는 것

Jsx문법을 사용하면 리액트에서는 내부적으로 createElement함수를 사용하도록 변환

• 리액트에서 JSX사용은 필수는 아니지만 얻을 수 있는 편리한 장점들 때문에 사용하는 것을 권함

동일한 코드

React.createElement()의 결과로 아래와 같은 객체 생성

JSX의 장점

• 간결한 코드
• 가독성 향상 → 버그를 발견하기 쉬움

JSX사용법

XML, HTML 코드를 섞어 사용하다 JS를 사용하고 싶을 경우 {}중괄호를 사용하여 변수나 함수 사용

Rendering Element

element 리액트 앱을 구성하는 가장 작은 블록들

React Element는 Dom Element의 가상표현, 여기서 말하는 element는 react element임

리액트 Elements는 실제로 화면에서 보이는 것들을 기술

• 리액트 Elements는 자바스크립트 객체 형태로 존재→ 컴포넌트의 유형과 속성 및 내부 자식에 대한 정보를 포함하고 있는 일반적인 자바스크립트 객체임 (마음대로 바꿀 수 없는 불변성)
• 컴포넌트 렌더링을 위해 모든 컴포넌트가 createElement함수를 통해 element로 변환됨

elements의 특징 및 렌더링

불변성: 한번 생성된 element는 변하지 않음 → 생성 후에는 children이나 attributes를 바꿀 수 없음

컴포넌트와 엘리먼트의 관계

화면에 변경된 element들을 보여주는 방법?

기존 element를 변경하는 것이 아니라 새로운 element를 만들어 기존과 바꿔치기 하면 됨

밑의 원 하나하나는 모두 element, 빨간색 원은 변경된 element라고 보면 됨

화면이 새로 갱신될 때, 새로운 element로 바꿔치기 된다

Elements 렌더링

생성한 elements를 실제 화면에 보여주기 위해서는 렌더링의 과정 필요

//Root DOM Node
<div id="root"></div>

div 태그 안의 리액트 elements들이 렌더링되며 이들은 React DOM에 의해서 관리됨

오직 리액트만으로 만들어진 웹사이트들은 단 하나의 Root DOM Node를 가짐

위의 트리 그림에서 가장 최상단에 있는 것이 Root DOM Node

Components and Props

리액트는 컴포넌트 기반의 구조를 지님, 여러개의 컴포넌트의 조합으로 이루어짐

→ 레고 블록 조립하듯 컴포넌트들을 모아 개발

→ 컴포넌트들을 반복적으로 사용하며 하나의 페이지 개발

→ 컴포넌트를 반복적으로 사용하며 개발시간과 유지보수비용 단축

작은 컴포넌트들이 하나의 컴포넌트를 이루고, 각 컴포넌트들이 전체 페이지를 구성

리액트의 컴포넌트는 입력이 있으면 출력이 있음. 따라서 그냥 하나의 함수라고 생각하면 편함

BUT 리액트 컴포넌트는 일반적인 자바스크립트 함수와는 다름

• 어떠한 속성(Props)를 입력으로 받아서 그에 맞는 React element를 생성하여 리턴

Props

Props는 Prop(react component의 속성)이 여러개인것을 의미

컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체

ex) 붕어빵에 들어가는 재료(props)가 다르면 다른 붕어빵이 만들어지는 것과 같음

같은 리액트 컴포넌트에서 눈에 보이는 글자나 색깔 등을 바꾸고 싶을 때 사용하는 컴포넌트 속 재료

4개의 여행지가 존재, 네 개의 카드는 모두 같은 모양이지만 배경이미지와 하단 부분의 색상이미지는 모두 다름

→ 모두 같은 컴포넌트에서 생성된 elements

→ 컴포넌트의 모습과 속성을 결정하는 것이 props

→ 컴포넌트에 어떤 데이터를 전달하고 전달된 데이터에 따라 다른 모습의 element를 화면에 렌더링하고 싶을 때, 해당 데이터를 props에 넣어서 전달

Props의 특징

• Read only 읽기만 가능. 값 변경 불가 (붕어빵이 다 구워졌는데 속재료 변경 불가..)

다른 Props로 element를 생성하려면?

• 새로운 값을 컴포넌트에 전달하여 element를 새로 생성 (이 과정에서 element가 다시 렌더링됨)

모든 리액트 컴포넌트는 그들의 Props에 관해서 Pure 함수 같은 역할을 해야 한다

→ 모든 리액트 컴포넌트는 Props를 직접 바꿀 수 없고, 같은 Props에 대해서 항상 같은 결과를 보여줘야 한다.

→ 리액트 컴포넌트의 입력으로 들어오는 Props는 자바스크립트 함수의 파라미터와 같다

Props 사용법 (JSX ver.)

인터넷 서치~후 실습

Component 만들기 및 렌더링

함수형 컴포넌트와 클래스형 컴포넌트가 있지만 최근에는 함수형 컴포넌트 사용 추세

함수형 컴포넌트

function Welcome(props){
    return <h1>안녕, {props.name}</h1>;
}

이 함수의 경우 하나의 Props객체를 받아서 인사말이 담긴 하나의 react element를 리턴, 간결한 코드

클래스형 컴포넌트 (위의 코드와 동일한 역할)

class Welcome extends React.Component {
    render() {
            return <h1>안녕, {this.props.name}</h1>;
 }
}

함수형 컴포넌트와 가장 큰 차이점은 모든 클래스 컴포넌트는 React.Component를 상속받아서 만듦

React.Component를 상속받았기 때문에 결과적으로는 리액트 컴포넌트가 되는 것

Component의 이름

항상 대문자로 시작해야 한다

컴포넌트는 붕어빵 틀의 역할을 하기 때문에, 렌더링시 component가 렌더링 되는 것이 아니라 컴포넌트라는 붕어빵 틀에 찍혀서 나온 element가 실제로 화면에 보이게 됨

리액트는 welcome 컴포넌트에 {name: “인제”}라는 props를 넘겨 호출하고, 그 결과로 react element생성

생성된 element는 DOM을 통해 업데이트되고, 우리는 브라우저를 통해 볼 수 있음

Component 합성

여러개의 컴포넌트를 합쳐 하나의 컴포넌트를 만드는 것

리액트는 컴포넌트 안에 또 다른 컴포넌트를 쓸 수 있기 때문에, 복잡한 화면을 여러개의 컴포넌트로 나눠서 구현 가능하다.

Props의 값을 다르게 하여 세 번의 Welcome 컴포넌트를 사용하고 있음

App 컴포넌트는 세 개의 welcome 컴포넌트를 포함

앱 컴포넌트를 루트로 하여 3개의 하위 컴포넌트로 구성

Component 추출

복잡한 컴포넌트를 쪼개서 여러개의 컴포넌트로 나누는 것

컴포넌트 추출을 잘 활용한다면 재사용성, 개발속도가 높아짐→ 컴포넌트가 작아질수록 해당 컴포넌트의 기능과 목적이 명확해지고 단순해지기 때문

컴포넌트 추출 과정

아바타 추출

추출된 아바타 컴포넌트의 모습

추출된 아바타 컴포넌트가 반영된 모습

UsrInfo 추출

아까 추출했던 아바타 컴포넌트도 함께 추출된 것을 볼 수 있음

유저인포 컴포넌트를 반영했을 경우 코드→ 코드가 단순해지고 가독성이 높아짐

지금까지 추출한 컴포넌트의 구조

컴포넌트는 기능 단위로 구분하는 것이 좋고, 재사용이 가능한 형태로 추출 할 것

재사용 가능한 컴포넌트들을 많이 갖고 있을 수록 개발 속도가 빨라진다!

State와 Lifecycle

리액트의 state = 리액트 Component의 상태, 리액트 컴포넌트의 변경 가능한 데이터

State는 사전에 정의된 것이 아니라 개발자가 정의해서 사용하게 됨

• 꼭 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 함
• state는 자바스크립트의 객체

this.state → 현재 컴포넌트의 state를 정의하는 부분

state는 정의된 이후 직접 수정할 수 없다(직접적인 수정 불가) → 컴포넌트 렌더링과 관련되어있기 때문에, 개발자가 직접 수정하게 되면 의도한대로 작동하지 않을 수 있음

state를 변경하기 원할때는 꼭 setState함수를 사용해서 변경해야 함

React 컴포넌트의 생명주기

컴포넌트는 계속 존재하는 것이 아니라 시간의 흐름에 따라 생성되고, 업데이트 되다 사라진다

Hooks

훅을 사용하면 함수 컴포넌트도 클래스 컴포넌트 기능을 모두 동일하게 구현 가능

리액트의 state와 생명주기에 갈고리를 걸어 원하는 시점에 정해진 함수를 실행되도록 만들고, 이때 실행되는 함수를 훅이라고 함

훅은 이름 앞에 use를 사용한다는 규칙을 가짐

useState()

state를 사용하기 위한 훅

    //사용법
        const [변수명, set함수명] = useState(초기값);

예시 코드는 useState를 사용하여 카운트 값을 state로 관리하도록 한 것

버튼이 눌렸을 때, setCount함수를 호출하여 count를 1 증가시킴

카운트값이 변동되면 컴포넌트가 재렌더링 되면서 새로운 카운트 값 표시됨

• 변수 각각에 대해 set 함수가 따로 존재하는 것 기억할 것!!

useEffect()

리액트의 함수 컴포넌트에서 Side effect(서버에서 데이터를 받아오거나, 수동으로 dom을 변경하는 작업 등)를 수행하기 위한 훅

//사용법
useEffect(이펙트 함수, 의존성 배열);

//Effect function이 mount,unmount 시에 단 한번씩만 실행되게 하고싶을 경우
useEffect(이펙트 함수, []);

//의존성 배열을 생략하면 컴포넌트가 업데이트 될 때마다 호출됨
useEffect(이펙트 함수);

의존성 배열: 이 이펙트가 의존하고 있는 배열인데, 배열 안에 있는 변수중에 값이 하나라도 변경되었을 때 이펙트 함수가 실행됨

Effect는 함수 컴포넌트 안에서 선언되어서 해당 컴포넌트의 state와 props에 접근할 수 있음

useMemo()

Memoization 최적화를 위해 사용하는 개념. 연산량이 많이 드는 함수의 호출 결과를 저장해두었다가, 같은 입력값으로 함수를 호출하면, 새로 함수를 호출하지 않고 이전에 저장에 두었던 결과를 반환하는 것 (메모해 두었다가 나중에 다시 사용하는 것과 같은 개념)

useMemo()사용법

useCallback()

useMemo() hook과 유사하지만 값이 아닌 함수를 반환

컴포넌트가 렌더링 될 때마다 매번 함수를 새로 정의하는 것이 아니라, 의존성 배열의 값이 바뀐 경우에만 함수를 새로 정의하여 리턴

useCallback()사용법

//동일한 역할을 하는 두 줄의 코드
useCallback(함수, 의존성 배열);
useMemo(()=> 함수, 의존성 배열);

useRef()

레퍼런스(특정 컴포넌트에 접근할 수 있는 객체)를 사용하기 위한 Hook

• useRef() 훅은 내부의 데이터가 변경되었으 ㄹ때 별도로 알리지 않는다

//사용법
const refContainer = useRef(초기값);

Hook의 규칙

1) Hook은 무조건 최상위 레벨(리액트 함수 컴포넌트의 최상위 레밸)에서만 호출해야 한다

→ 반복문이나 조건문, 또는 중첩된 함수에서 호출 불가

→ Hook은 컴포넌트가 렌더링될 때마다 매번 같은 순서로 호출되어야 한다

2) Hook은 리액트 함수 컴포넌트에서만 호출해야 한다

→ 일반적인 자바스크립트 함수에서 훅을 호출할 수 없음

Custom Hook

이름이 use로 시작하고 내부에서 다른 Hook을 호출하는 하나의 자바스크립트 함수

밑) 위의 두 개의 컴포넌트에서 중복되는 로직을 추출해서 가져온 것

커스텀 훅은 특별한 규칙이 없고, 파라미터로 무엇을 받을지 무엇을 리턴할지를 개발자가 직접 정할 수 있음

커스텀 훅 적용 예시. 커스텀 훅의 이름은 꼭 use로 시작해야 한다!

여러개의 컴포넌트에서 하나의 커스텀 훅을 사용할 때, 컴포넌트 내부에 있는 모든 state와 effects는 전부 분리되어 있다.

리액트는 각 커스텀 훅 호출에 대해서 분리된 state를 얻게 됨

각 커스텀 훅의 호출 또한 완전히 독립적

Event

리액트의 event는 괄호 안에 함수를 그대로 전달

<button onClick={activate}>
    Activate
</button>

Dom과 리액트는 함수를 표기하는 방법에서 차이 존재

Event Handler(Event Listener)

이벤트가 발생했을 때, 해당 이벤트를 처리하는 함수

arguments, Parameter : Event Handler에 전달할 데이터

매개변수를 event handler에 전달하는 방법

매개변수의 순서는 원하는대로 변경해도 상관 없음

Key

각 객체나 아이템을 구분할 수 있는 고유한 값, 아이템들을 구분하기 위한 고유한 문자열

여러개의 컴포넌트 렌더링하기 map() 이용

map함수를 사용하여 numbers배열에 들어있는 각 숫자에 2를 곱한 값이 들어간 doubled 배열 생성

→ 배열의 모든 아이템에 각 연산을 수행한 뒤, 그 결과를 배열로 만들어서 리턴

const doubled = numbers.map((number)=> number*2);

예시코드

최종적으로 렌더링된 결과

List의 key

map() 함수 안에 있는 Elements는 꼭 key가 필요하다

key의 값은 같은 List에 있는 Elements 사이에서만 고유한 값이면 됨

→ 두 대학교 사이에서는 학번이 같아도 상관없는 것처럼!

key값 사용에는 여러 방법이 있지만, 고유한 Id로 사용하는 것이 좋다

고유한 id가 없을 경우 index(배열 내 현재 아이템의 index의미)를 사용할 수 있다

Form

사용자로부터 입력을 받기 위해 사용

리액트의 form은 html의 form과 다르다

html형식의 form 경우, 자바스크립트를 통해 각각의 값에 접근하기 어렵다

사용자가 입력한 값에 접근하고 제어할 수 있도록 하는 Controlled Components를 알아보자

Controlled Components

값이 리액트의 통제를 받는 Input Form Element

리액트에서 모든 값을 통제할 수 있음

함수형 컴포넌트에서는 setState()이 아니라 useState로 관리

위의 html form을 리액트의 controlled components로 작성한 코드

→ 사용자의 입력을 직접적으로 제어할 수 있음

모든 입력값을 대문자로 변경하고 싶을 경우

const handleChange = (event) => {
        setValue(event.target.value.toUpperCase());
}

여러 form 태그 예시

textarea

select 태그 drop-down 목록을 보여줌

html방식

리액트 방식 (더 편리함)

여러개의 옵션 선택 가능

<select multiple={true} value={['b','c']}>

리액트에서는 모두 value라는 attribute를 통해 값을 전달하고, 값을 변경할 경우 onChange value 함수를

사용하여 값을 업데이트

file input 태그: 디바이스의 저장 장치로부터 하나 또는 여러개의 파일을 선택할 수 있게 해주는 html xorm

Html 방식, 리액트에서는 값이 리액트의 통제를 받지 않는 Uncontrolled Component가 됨

<input type="file"/>

Multiple Inputs 하나의 컴포넌트에서 여러개의 입력을 다룰 경우

→ 여러 개의 state를 선언하여 각각의 입력에 대해 사용

→ 각각의 set 함수를 사용하여 구현

Lifting State Up (State를 공유하는 방법)

Shared State

→ State에 있는 데이터를 여러개의 하위 컴포넌트에서 공통적으로 사용하는 경우

개발하다보면, 하나의 데이터를 여러 컴포넌트에서 표현해야 하는 경우 생김.

이 경우, 각 컴포넌트의 state에서 데이터를 각각 보관하는 것이 아니라, 가장 가까운 공통된 부모 컴포넌트의 state를 공유해서 사용하는 것이 더 효율적.

이 경우 자식 컴포넌트들이 각각 값을 가지고 있을 필요 없음

Context

컴포넌트에서 데이터를 기존의 props를 통해 전달하는 대신, 컴포넌트 트리를 통해 곧바로 컴포넌트로 전달하는 방식을 제공 → 어떤 컴포넌트든지 데이터에 쉽게 접근할 수 있음

단점: 여러 컴포넌트에 걸쳐 자주 사용되는 데이터들은 반복적인 코드가 많이 생겨 지저분해짐, Props를 계속 하위 컴포넌트로 전달해야함

위의 단점을 해결하기 위해 context 사용.

코드도 깔끔해지고 데이터를 한 곳에서 관리하기 때문에 디버깅에 유리

언제 사용하면 좋을까?

여러개의 component들이 접근해야 하는 데이터

로그인 여부, 로그인 정보, UI 테마, 현재 언어 등 ..

다른 방법~?

useContext() 훅도 있음 나중에 찾아볼 것

styled-components 설치

#npm 사용 경우
npm install --save styled-components

설치 후 간단한 실습 예시

Templete literal

styled-components의 props사용 예시

다른 컴포넌트 부분의 스타일을 확장하고 싶을 경우

"deploy": "gh-pages -d build",
"predeploy": "npm run build"

package.json내의 scripts에 git 페이지를 빌드하기 위한 코드를 넣고, 터미널에 npm run deploy를 입력했을 때 발생한 에러이다.

오류 메세지를 보면 origin 경로를 가져오는데 실패했다고 한다.

해결 방법

1. git remote -v 현재 깃허브 경로를 확인하고 복사한다
2. git remote add origin https://github.com/(이름)/(리포지터리)
3. git push -u origin master
4. npm run deploy 재실행하고 배포 확인

vscode로 로컬에서 작업하고 github에 push를 하는 과정에서 발생했다.

이 경우 git 정보를 초기화해서 해결할 수 있다.

git init
git add .
git commit -m "init"
git remote add origin [github repo address]
git push -u origin master