27일차 (React intro)

오늘은 HTML과 JS가 묶여있다고 생각되는 리액트의 인트로를 배웠다. 이번 주는 새로운게 너무 많아...

 

React

리액트는 프론트앤드 개발을 위한 Java Script 오픈소스 라이브러리라고 불린다.

 

리액트를 배워야하는 이유

• 선언형(명시적이다) - 코드를 자세히 분석을 안하고도 코드의 의도를 분명히 알 수 있는 것을 말한다. (jsx를 활용하여 직관적으로 작성이 가능하다.)
• 컴포넌트 기반 - 하나의 가능을 구현하기위해 여러 종류의 코드를 묶어 놓은 것을 말한다. (컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있다.)
• 범용성 - s프로젝트 어디든 유연하게 적용가능이 가능하다.

번외 - facebook에서 만든 오픈소스이기 때문에 관리가 안정적이고 가장 유명하며 리액트의 형제격인 리액트 네이트브를 사용하여 모바일 개발도 가능하다.

 

JSX

JSX는 Java Script XML의 줄임말로 JS를 확장한 문법이다.

• React에서 UI를 구상할때 사용하는 문법이며 이 문법을 사용하여 React의 엘리먼트를 만들 수 있다.
• 브라우저가 바로 실행할 수 있는 js코드가 아니기 때문에 js코드로 변환을 해주어야 한다. Babel이 JSX를 브라우저가 이해할수 있는 js로 컴파일 한다.
• React에서는 DOM과 달리 CSS와 JSX만 사용하여 웹 어플리케이션을 개발할 수 있다. (컴포넌트 하나를 구현하기 위해 필요한 파일의 갯수가 줄어들었고 한눈에 컴포넌트를 확인할 수 있다.)

=> JSX를 사용하면 js만으로 마크업형태의 코드를 작성하여 DOM에 배치가능. 

 

왜 JSX를 사용해야할까

DOM에서는 HTML과  js를 함께 사용하기 위해서는 서로 연결하기 위한 작업이 필요하다. 하지만 JSX는 js문법과 HTML문법을 동시에 사용하여 기능과 구조를 한눈에 확인할 수 있다. (구조와 동작에 대한 코드를 한 묶음으로 적은 코드를 컴포넌트라고 한다.) 

=> JSX를 사용하므로써 코드를 이해하기 쉬워짐. Babel이 자동으로 컴파일 해줌
JSX없이도 React 요소를 만들 수 있지만 코드가 복잡하고, 가독성이 떨어진다. JSX를 사용하는 의미가 사라짐.

 

기본적인 JSX 문법

• 여러 엘리먼트를 작성하고자 하는 경우 최상위에서 opening tag와 closing tag로 감싸주어야 한다.(HTML처럼?) = 여러 개 태그를 최상위 태그로 묶어주어야한다.
• React에서 CSS class 속성으로 지정하려면 className으로 표기해야 함. (쓰임은 같음) (class로 적는다면 React에서는 html의 class속성이 아니라 js의 class로 받아들이기 때문에 주의 필요.)
• js 표현식을 쓰고자 한다면 꼭 중괄호를 이용해야 한다. 중괄호를 이용하지 않는다면 일반 텍스트로 인식.
• React 엘리먼트가 JSX로 작성되면 대문자로 시작해야한다.(생성자 함수처럼?) 소문자면 HTML의 엘리먼트로 인식하게 된다. (대문자로 작성된 JSX 컴포넌트를 따로 사용자 정의 컴포넌트라고 부른다.)
• 조건부 렌더링은 if문이 아닌 삼항 연산자를 이용해야한다. = 표현식은 값이다. if문은 값이 아니어서 삼항연산자로 사용한다.
• 여러 개의 HTML 엘리먼트를 표시할 때는 map()함수를 사용해야한다.
• map함수를 사용할 때는 반드시 'key' JSX 속성을 넣어야한다. (넣지 않으면 항목에 넣으라고 경고가 뜬다.) = 넣지 않으면 리액트에 에서 불필요한 행동을 하게되어 웹의 속도가 늦어진다. (uuid < nanoid = 무작위한 문자열 생성 ==>key속성에 넣어도 되지만 임시 방편일 뿐이다.) (key에 배열의 인덱스를 넣을수 있지만 최후의 보루로 사용해야한다.)

Component

• 하나의 기능 구현을 위한 여러종류의 코드 묶음, UI를 구성하는 필수 요소, 리액트의 심장
• 각자 독자적인 기능을 가지고 UI의 한부분을 담다하기도 하는 컴포넌트를 여러 개 만들고 조합하여 어플리케이션을 만든다.
• 모든 리엑트는 최소 한개의 컴포넌트를 가지고 있다. 최상위 컴포넌트는 근원의 역할을 하므로 다른 자식 컴포넌트를 가질수 있다.(트리구조)
• 독립적인 여러 개의 컴포넌트를 만들고 이들을 모아 복잡한 UI를 구성할 수도, 복잡한 어플리케이션을 만들 수도 있다.
• 수정할때 컴포넌트의 위치만 수정하면 되기 때문에 편리하다.(HTML,CSS,JS 3가지를 사용했던때와는 달리)