2021.01.25 React Component, JSX 문법 정리

2021.01.25 _React Component, JSX 문법 정리_정리노트

 

 

역시..포스팅이 최고 계속 2주동안 이것저것 강의들으면서 정리하니까, 너무 정리도 안되고 강의들어도 처음 듣는 느낌... 포스팅으로 최종적으로 정리정리

 

여러 블로그, 공식문서등등.. 

특히 velopert 님 블로그 중에서 리액트 튜토리얼 포스트..매우 감사합니다..감사합니다.. 

 

 

쨋든 여러 경로를 통해서 혼자 이것저것 잡다한것만 많이 읽어서 내가 그냥 정리하면서 쓰겠슴!

 

 

먼저 component 부터!

 

 

component

리액트에서는 컴포넌트 단위로 작성하게 된다. 컴포넌트는 프로젝트의 유지보수성을 우수하게 해줄뿐만 아니라, 재사용이 용이하다는 점에서 큰 강점으로 작용한다. 

 

index.js

 

 

index.js 에 들어가면, React.DOM.reder() 라는 함수 안에 

<React.StrictMode></React.StrictMode> 가 있고,

 

그 안에 <App /> 가 들어있는데,

 

 

여기서 <App /> 가 컴포넌트다. 우리는 컴포넌트를 만들고 해당 컴포넌트를 다른 파일로 이런식으로 불러온다. 

 

컴포넌트를 만들고 불러오는 거는 밑에 사진 ㄱㄱ

 

또한 , React.DOM.reder() 함수는 브라우저 상의 우리가 작성한 리액트 컴포넌트를 보여주기 위한 함수다. 

첫번째 

<React.StrictMode>

    <App />

  </React.StrictMode>

 

해당 파라미터는 우리가 렌더링 할 결과물이고,

 

 

쉼표로 분리된 두번째 파라미터인 

 

document.getElementById('root') 

 

이 파라미터는 리액트 첫번째 포스팅에서 설명했듯이, id 가 root 인 DOM 을 찾아서 ( public/index.html ) 여기다가 해당 첫번째 파라미터를 넣어줘라고 하는 것이다.

 

 

헷갈리니 해당 리액트 앱을 실행 시켜 개발자 도구로 찍어보면, 

 

 

 

 

해당 index.html 에 있는 root 라는 div 태그에 App 이라는 컴포넌트가 담겨 있는 것을 알 수 있다. 이 모든 과정이 담겨 있는 연결 경로, 연결 되어 있는 컴포넌트가 적혀있는 것이 index.js 파일인 것이고, App.js 기본 컴포넌트가 담겨 있는 컴포넌트 파일, 이 모든 것을 root 라는 div 로 묶어서 띄워져 있는 실질적인 html 파일은 index.html 이다. 

 

근데 실질적으로 띄우는 화면인 index.html 에서는 따로 작업하지 않을 것이다. 왜냐하면, 리액트에서 App.js 이라는 파일을 컴포넌트로 제공해서 여기를 작업하시고, 저희가 연결은 다해놓았습니다~ 라고 해놓은 거기 때문에 리액트에서 쓰는 문법인 jsx 를 사용해서 컴포넌트를 만들고 뚝딱뚝딱 하려면 js 파일에서 해줘야 하기 때문.

 

뭔가 말이 이상한데, 쨋든 우리가 메인으로 작업할 파일은 App.js라는 말을 이렇게 길게 풀어썼다.  

 

 

마지막으로<React.StrictMode></React.StrictMode> 는 Js 에서 사용되는 'use strict'; 와 같은 strict 모드인데, 평소에는 그냥 넘어갔던 에러들을 띄워줌으로써 앱 내의 잠재적인 문제를 알아내기 위한 도구라고 정도 알아두자! 다음에 자세히 장점에 대해 다뤄보고, 지금은 컴포넌트에 집중해보게쑴.

 

 

 

 

App.js

 

아까 위에서 말했던 App.js 로 들어가서 보면 , 기본적으로 react를 불러오고, 기본화면에서 사용되었던, logo, 마지막으로 css 까지 import 되어 있는 모습을 볼 수 있다. 이런 작업들은, 우리가 웹팩을 사용하기 때문에 가능한 작업이다. 쨋든 이렇게 불러오면 각각의 확장자에 따라 서로 다른 작업을 하게 된다. 

CSS 파일은 나중에 프로젝트에서 사용한 프로잭트를 한 파일에 모두 결합해주는 작업을 진행,

JS 파일은 모든 코드들이 제대로 로딩되게끔 순서를 설정하고 하나의 파일로 합쳐주는 작업을,

 

컴포넌트를 파일로 분리했을 때의 렌더 예

 

svg 처럼 기타의 확장자는, 먼저 파일로서 그냥 파일로 불러온 다음에 나중에 특정 경로에 사본을 만들어 주게 되고, 해당 사본의 경로를 텍스트로서 받아온다. 

 

 

이제 그 밑을 보면,

 

App.js

 

 

App 컴포넌트가 미리 생성 되었다. 

코드들은 보지말자.. 혼자 연습하면서 이것저것 적은거고 맨 밑에 보면,

 

 

 

이 코드가 있을 것이다. 이렇게 내보내주면, 다른 곳에서 해당 컴포넌트를 쓸 수 있다. 

 

다시index.js 를 가봅씨다 

 

 

index.js

 

 

그래서 여기서 App 이라는 해당 컴포넌트를 위에 import 해주고 ( ./ 은 현재 경로에서 App 이라는 이름의 js 파일을 불러오라고 적어준 것. index.js 와 App.js 는 같은 src 폴더에 들어있다 ㅇㅇ )

 

<App /> 이렇게 가져와서 적어줄 수 있었던 것!

 

쨋든 컴포넌트를 쓰고 내보낸다음, 다른 곳에서 쓸 수 있다. 그래서 기능별, 주제별로 컴포넌트를 파일을 분리해서 적어주고 내보낸다음, 메인이 되는 App.js 에다가 분리해서 적어주면 좋겠지??

 

 

 

 

다시 App.js 로 갑니댜

 

 

 

 

 

App.js

 

 

자 이렇게 보면, 되게 안에 이상하게 적혀있을 것이다. 기본으로 제공되는 App 컴포넌트의 return 안에 보면, 

막 html 클래스도 적혀있고, 막 자바스크립트인 코드도 있을 것이고, 막 여러가지로 혼동 되어 있을 것이다. 

 

이게 뭘까.. 이게 바로 리액트에서 사용하는 JSX 문법이다. 

 

JSX

자바스크립트를 확장한 문법이며, UI 가 어떻게 생겨야 하는지 설명하기 위해 리액트와 함꼐 사용할 것을 권장한다.

형태만 보면, Html 템플릿 같지만, 자바스크립트의 모든 기능이 포함되어 있다. 

 

 

이로 인해 몇 가지 규칙이 존재하는데,

 

클래스 이름은 camelCase 규칙으로.

JSX 문법은 템플릿보다 자바스크립트에 가깝기 때문에 하이픈 (-) 을 쓰면, 자바스크립트의 빼기 연산과 같이 인식하기 때문에, 자바스크립트의 camelCase 프로퍼티 명명 규칙을 사용한다. 예를 들어 class-name 이라고 쓰면 안되고, className 이라는 이름으로 써야한다. 

 

두 개 이상의 엘리먼트는 반드시 하나의 엘리먼트로 감싸야 한다. 

 

<div>hello</div>

<div>hi</div>

 

이렇게 div 가 2개 있으면, 리액트에서는 에러를 띄워준다. 2개 이상이 엘리먼트는 하나의 엘리먼트로 감싸야하기 때문에,

 

<div>

<div>hello</div>

<div>hi</div>

</div>

 

이렇게 2개의 엘리먼트를 감싸는 하나의 부모 엘리먼트가 있어야 한다. 

 

만약에, div 가 여러개라서 큰 부모 엘리먼트가 div 라서 헷갈린다면 ?

<React.Fragment>

<div>hello</div>

<div>hi</div>

 </React.Fragment>

 

이렇게 React.Fragment 라는 태그로 감싸준다. key 값이 없다면, <> ,</> 도 가능한데 key 값이 아직 뭔지 모르니까 다 사용 가능 한 React.Fragment 를 사용합씨다.

 

 

반드시 태그를 닫아야 한다.

우리가 html 에서 <div> </div> 를 쓸 때처럼 꼭 닫는 태그가 있어야 하는데, <br>, <hr> , <img> 처럼 한줄로 쓰는 태그도 <br / >, <hr / > , <img 내용 / > 이런식으로 닫아줘야 한다. 

 

 

자바스크립트 값은 중괄호에.

 

let hi = 'korin'

 

이 값을 가져오고 싶을 때는 

<div> 

hello { hi }

</div>

 

이렇게 중괄호 안에서 가져와서 여러가지 일을 할 수 있다.

 

 

IF 사용방법

우리가 조건식을 써줄 때, 리액트에서는 if 문을 바로 써줄 수 는 없고, 함수 안에서 쓸 수 있는 자바스크립트의 IIFE 방법으로 쓸 수가 있다.  즉 if 를 바로 쓸 수는 없고, ===, && 와 같은 삼항연산자로 쓸 수는 있는데, 어려우니 그냥 말그대로 if 를 함수안에 집어넣어버리자.

 

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

** 출처 리액트 공식문서

 

이렇게 함수 안에서 if 도 쓸 수 있고, for문이나 if 안에 {} 중괄호로 쓰여진 JSX 를 변수나 파라미터로 쓰고 반환할 수도 있다.

 

 

(2021. 07.07 추가)

조건부 연산자 ( 삼항 연산자 )로 나타내면, 

 

이런식으로 ? 와 : 을 쓰면 된다.

 

또 && (and) ,  와 || (or) 의 조건부 연산자를 사용해서 조건부로 렌더링 할 수도 있다.

 

 

&& 연산자

 

 

 

이렇게 하게 되면, name 이 react 가 아닌 경우에는 아무것도 보여주지 않는다. return 뒤에 괄호는 한줄이라 굳이 적어주지 않았음.

쨋든 리액트에서는 falsy 한 값은 null 과 같이 아무것도 나타나지 않게 하기 때문 .  다만 0 은 false 지만 리액트에서는 예외로 보여주게 됨.

 

 

|| 연산자

 

이렇게 리액트 컴포넌트에서 undefined 만 반환하면 안됨.

 

 

오류가 나온다.

 

 

이 때 해당 값이 undefined 면 , || 을 사용해서 undefined 일 때 보여줄 값을 지정해줄 수 있다.

 

이렇게 ㅇㅇ ! 이렇게 적어주면 오류를 방지할 수 있고, 내 기준 리액트의 경우 어디서 오류가 났는지.. 또는 어디서 undefined를 내뱉었는지 알기 어려웠어서  이렇게 || 연산자를 통해서 undefined한 값을 어디서 뱉어냈는지 알 수 있어서 좋은 방법인 것 같다!

 

 

 

여기서 보면 역시 App 에서 아무런 값을 return 하는 게 없다고 떠도 밑의 화면에 보면 전혀 다른 곳에서 적혀있기 때문에, 나같은 초보자한테는 유용한 값일 것 같다.

 

 

이렇게 ! ㅎㅎ

 

 

 예외로 , 

 

 

JSX 안에다가 undefined 는 보여줘도 괜찮음!

마찬가지로 JSX 안에다가 넣고, undefined 가 되었을 때 보여주고 싶은 값이 있다면 || 연산자도 물론 사용가능!! 

 

 

추가로, 아직 논리연산자가 익숙하지 않다면, 

 

https://korinkorin.tistory.com/50

2021.04.05 JavaScript 논리 연산자 정리

 

 

null 과 undefined 의 차이

https://korinkorin.tistory.com/49

2021.03.24 Java Script 변수 선언, 할당

 

이 기회에 홍보홍보 ㅎ

 

 

 

 

JSX 속성

 

const hello = <div tabIndex="0"></div>;

** 출처 리액트 공식문서div 태그나 다른 태그의 속성에서 따옴표를 이용해 문자열 리터럴을 정리할 수 있다.

 

const element = <img src={user.avatarUrl}></img>;

 

** 출처 리액트 공식문서

자바스크립트 표현식을 사용하고 싶으면? 아까 중괄호 안에 적어주었는데, 그거 역시 가능.

 

여기서 주의할 점은, 이 표현식을 삽입할 때에는 중괄호만 적어주면 되고 , 따옴표는 사용하면 안된다. 

위의 두 가지 예를 합쳐서 사용하면 안된다는 소리!

 

 

---

 

확실히 강의만 주구장창 들으면서 혼자 정리하다가 신기하게 포스팅만 하면 더 꼼꼼히 정리하게 되서 그런가 잘 정리 되는 느낌.. 우다다다 나머지 강의들었던 것도 또 정리해보게쑴.