23.03.22 웹개발_React

Yeondong Choe·2023년 3월 22일
0

회고 Tip
1. 지금 현재, 기분과 느낌을 표현(구체적)
2. 오늘 학습한 내용의 단어를 모두 나열
3. 나열한 단어를 하나씩 설명
4. 설명하기 어려운 단어가 있다면 그 이유를 생각
5. 스스로 설명하기 위해 질문한다면 어떻게 질문할것인가 생각

웹개발_React 수업 후기

오늘은 React를 처음 공부해보았다.
이전에 공부했던 DOM보다 훨신 편하게 사용할 수 있는 장점이 있지만 역시나 접하기에 쉽지는 않았다.
비동기때부터 어려운 코딩들이 나오고 연습할 수 있는 문제들이 없다보니 자신감이 많이 떨어진거같다.
오늘도 한참을 멍때리다가 결국 다시 복습을 하게되었는데 멍때리면서도 머릿속으론 React를 생각하는 나자신을 보며 어려워서 위기감을 느낀거같다는 생각이 들었다. 그래서 한편으론 웃겼다...
그래도 지금도 잘하고 있고 또 남은 시간 포기하지 않고 따라가다보면 지금의 어려움은 또 해결되고 익숙해질때가 올거라고 생각한다.

기억나는 단어들 나열해보기

  1. React
  2. JSX
  3. Component

1. React란?

React는 프론트앤드 개발을 위한 JS오픈소스 라이브러리이다.
프레임워크도 틀렸다고 하진 않지만 라이브러리라고 하는 이유는 다른 프레임워크들처럼 모든 틀이 정해져있지 않으며, 다른 라이브러리들도 함께 사용해서 구현하기 때문이다.
따라서 프레임워크중에선 가볍고 라이브러리중에선 무거운편이라고 할 수 있다.

선언형이란? 코드를 자세히 분석하지 않고 코드의 의도를 알 수 있는것을 말하는데, 이전처럼 HTML CSS JS로 나눠 적으면 직관적이지 못한데 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다.

컴포넌트란?
기능단위로 구현하여 서로 독립적이고 재사용이 가능하게하며, 기능 자체에 집중하여 개발하는것이다.
따라서 React는 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다.

컴포넌트 단위의 장점으로는 컴포넌트간의 의존성이 없어 독립적으로 사용할 수 있고 재사용이 가능하다.
따라서 각 기능의 작동에 집중해서 구현할 수 있고.
에러를 찾거나 유닛테스트에 하기에 좋다.

리엑트는 프레임워크가 아닌 자바스크립트의 라이브러리이기 때문에 어디에서든 가져와서 수정하여 사용할 수 있어 범용성이 좋은편이다.

2. JSX?

JSX란 JavaScript XML의 줄임말로 자바스크립트를 확장한 문법으로 문자열도 아니며 HTML도 아니다.
이 문법을 통해 React 엘리먼트를 만들 수 있다.

하지만 브라우저가 바로 실행할 수 없기에 브라우저가 이해할 수 있는 JavaScript코드로 변환이 필요한데
이때 "Bable"은 JSX를 JavaScript로 컴파일해주며 이후 브라우저가 읽고 화면에 렌더링 할 수 있게 된다.

React에서는 DOM과 다르게 HTML이 없으며, JSX문법을 사용하여 JavaScript만으로 마크업(markup)형태의 코드를 작성하여 DOM에 배치 할 수 있게 된다.

주의사항: JSX는 HTML처럼 생겼지만, HTML이 아니며 앞서 말한 "bable"을 이용한 컴파일 과정이 필요

JSX문법을 사용하면 DOM코드처럼 HTML을 적어서 JS를 따로 연결해주지 않아도 되며 보다 더 명시적으로 코드를 작성할 수 있다.
즉 JS문법과 HTML문법을 동시에 이용해 기능과 구조를 한문에 확인할 수 있게 되는것이다.

또한 이런 구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋을 컴포넌트라고 한다.

1) JSX 사용규칙

JSX에서 여러 엘리먼트를 작성할경우 최상위에 opening tag와 closing tag를 사용하여 감싸주어야 한다.

React에서 CSS class 속성을 지정하려면 'className'으로 표기해야한다.
'class'로 작성시 자바스크립트 클래스로 받아들이기때문에 주의해야한다.

JSX에서 자바스크립트를 사용한다면 반드시 중괄호를 이용해야한다 그렇지 않으면 일반 텍스트로 인식한다.

React 엘리먼트가 JSX로 작성할때 "대문자"로 시작해야하며 소문자로 시작하게 되면 일반적인 HTML엘리먼트로 인식하게 된다.
대문자로 작성된 JSX 컴포넌트를 사용자 정의 컴포넌트라고 부른다.

조건무 렌더링은 if문이 아닌 삼항연산자를 이용해야한다.

여러개의 HTML엘리먼트를 표시할 때 'mpa()' 메서드를 사용할 수 있는데 반드시 "key" JSX속성을 넣어야 한다.

3. Component?

컴포넌트란 하나의 기능 구현을 위한 여러 종류의 코드 묶음이며 UI를 구성하는 필수요소이다.
누군가는 리액트의 심장이라고 말하기도 한다.

React를 이용하면 각자 독립적인 기능을 가지며 UI의 한 부분을 담당하기도 하는 이러한 컴포넌트를 여러개 만들고 조합하여 애플리케이션을 만들 수 있다.

컴포넌트는 애플리케이션 내부적으로 근원(root)이 되는 역할을 하는데 최상위 컴포넌트는 근원의 역할을 하기에 다른 자식 컴포넌트를 가질 수 있다.
이런 계층적 구조를 트리구조로 형상화 할 수 있다.
DOM의 트리구조와 같다는걸 알 수 있고 JSX사용으로 DOM처럼 표현할 수 있다는 말이다.

만약 애플리케이션에 사이드바를 추가한다고 가정했을때,
DOM이라면 HTML을 수정하여 구조를 바꾸고 스타일 속성도 수정해야하고 변경된 구조와 스타일에 맞게 자바스크립트가 DOM을 조작하게 수정해야한다.
하지만 React를 이용해 컴포넌트 기반으로 만들었다면 기존 컴포넌트의 위치만 수정해주면 간단하게 추가할 수 있다.
이것이 컴포넌트 기반 개발의 장점이라고 할 수 있다.

오늘부터 일주일동안 React의 기본을배우게 되는데 매수업을 소중하고 귀하게 생각해서 더욱 집중하고 어려운 부분들도 이해할 수 있는 능력을 스스로 길러봐야겠다. 내일도 화이팅!

profile
개발자 동동

0개의 댓글