[웹 FE 스터디] 리액트 시작하기(2) - JSX, elements, props

TAB 2022 2학기 학회활동 [팀 스터디]

 TIL 포스팅입니다.

작성자 : 38기_김민서

---

JSX란?

react에서는 jsx라는 문법을 사용하는데, 풀네임은

a syntax extension to Javascript

이다. 어떻게 확장이 됐는지 간략히 나타내면 Javascript + XML/HTML 라고 볼수있다.

const first_react = <h1>Hello</h1>

위의 코드가 jsx문법을 사용한 사례라고 볼수있다.

js와 html코드가 같이 있는모습이다.

 

이렇게 jsx로 작성된 코드는 아래와같이 js코드로 변환이된다

React.createElement 함수의 매개변수형태로 일일히 넣어줘야하는것을 태그형태로 직관적으로 쉽게 작성할수있는것이다+0+

react에서는 이렇게 정의해준 element들의 정보를 받고, 이를 react 전용트리인 virtual dom에 넣어준다.

element에 들어가는 속성, 즉 createElement들의 파라미터는 어떤게 들어갈까?

1. type : 어떤 유형인지 ( 어떤 태그 종류인지)

2. props : class 이름, style,등등..

3. children : 자식 element들

위와 같이 3가지가 들어간다.

이런 jsx를 사용하면 아래와 같은 장점이있다.

1. 코드가 간결해진다.

2. 가독성이 향상된다.

위의 jsx를 사용한, 사용하지않은 코드를 보면 태그형태로 작성된 jsx를 봤을때 더 간결하고 가독성이 쉬워졌음을 볼수있다.

3. injection attacks 방어 ( 보안위협을 줄일수있다)

 

 

JSX 사용법

1. html/xml 코드사이에 중괄호를 사용해서 js 코드를 작성한다.

만약 태그 속성에 js코드를 작성하고싶어도 똑같이 중괄호로 묶어서 넣어주면된다.

 

Element란?

리액트앱을 구성하는 가장작은 블록들이라는 뜻이다.

보통은 dom에서 쓰여왔다.

이런식으로 개발자도구를 펼쳤을때 elements메뉴가 제일 먼저뜨는데 dom element인 html 코드를 보여주는 모습이다.

react에서 사용되는 element와의 의미에서 차이점은

dom element : 화면에서 나타나는 내용을 기술하는 자바스크립트 객체 ;descriptor로 불리다가 이렇게 불림

react element : 화면에서 보이는것을 기술; render해서 실제 element로 변환한다

코드상으로 보면 이와 같다.

좌 : react element(create element로 실제 생성된 element) 우: dom element

element는 불변성이라는 주요특징을 가지고있다.; 한번 생성되면 children이나 attributes를 변경할수없다(immutable)

따라서 화면이 갱신될때 해당하는 element를 새로운 element로 갈아끼는 형식으로 업데이트된다.

 

Components란?

웹페이지를 보다보면 반복적인 요소들이 나올때가있다. 

유튜브 화면을 예시로 가져와봤는데 해당 썸네일-제목-조회수-날짜-채널 프로필사진과 같은 배치방식이 똑같은블록이

동일하게 옆에 그려진것을 볼수있다. 이를 react에서는 component로 찍어낸다.

약간 함수랑 비슷한 구조라고 생각하면되고 입출력구조는 다음과같다.

Props란?

그러면 이 component의 입력으로 들어가는 props는 뭐일까?

위의 예제가 찰떡이라서 가져와봤다.

각기 다른 element를 만들때 넣어주는 입력값이며 구체적인 정의는

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

주요 특징은 read-only 즉 불변성을 갖고있다는 뜻이다.

리액트 공식문서에서는 다음과 같은 규칙이 명시되어있다고 한다.

 

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

pure , impure함수는 입력값 변경유무에 따른 특징을 가진 함수이다.

위의 예제에서 impure 함수는 account의 total 속성을 amount만큼 가감해줌으로써 변경해주었다. 따라서 impure함수라고 할수있다.

props는 불변성, 즉 입력값을 변경할수없으므로 pure함수의 특징을 따른다고 볼수있는것이다.

즉 props를 직접 바꿀수없고 같은 props에 대해서 같은결과를 보여줘야하는것이다.

 

Component의 종류및 사용법

종류

component는 크게 

• Function component(훅)
• class component

2가지로 구성되어있다.

주로 함수 컴포넌트을 개선해서 만든 훅을 사용하고 class component는 사용하지않는다고 한다

함수 컴포넌트를 주로 써왔고 개발할때 한번도 class component는 안써봐서

네이밍규칙

또한 중요한 규칙이 있는데 component 이름은 대문자로 시작해야한다.

보통 html에서 태그이름들은 모두 소문자로 시작하기때문에 render하는 과정에서 사용자가 만들어준 컴포넌트도 html태그로 착각하고 만들어버릴수도있다.. 따라서 대문자로 이름 꼭지어줘야한다!

컴포넌트 사용해보기 ; 컴포넌트의 기본적 구조

그럼 이제 컴포넌트라는 개념을 사용해서 웹페이지 화면을 구성해보자

위의 유튜브 화면과같이 웹페이지 화면은 여러 컴포넌트로 구성되어있다.

이에 여러 컴포넌트를 상위컴포넌트에 포함되는 형태로 다음과같이 구성하는것이 기본적인 형태이다.

컴포넌트의 추출이라는 용어도 해당강의에서 나온다.

부피가 큰 컴포넌트를 자동으로 쪼개주는 기능인가?!해서 띠용해서 봤는데 그냥 큰 컴포넌트를 작은 컴포넌트로 분리해서 정의해서 사용하자라는 의미이다. 위의 유튜브에서 나왔던 요소들(썸네일-제목-조회수-날짜-채널 프로필사진)단위로 쪼개서 만들자~이런 의미인거같다.

이렇게 추출을해서 선언을 해놓으면 다른 상위 컴포넌트에서도 사용할수있기때문에 권장되는것으로 보인다. 

예제_댓글 컴포넌트 만들기

props로 프로필사진, 이름, 내용의 값을 받고 이 컴포넌트로 댓글 4개를 구현해주었다.