React intro

드디어 프론트앤드의 꽃인 리액트를 배우기 시작했다 ..!! 근데 강의를 듣고 굉장히 벙쪘었다..

아니 이게 뭔소리여 자바스크립트랑 뭔가 많이 다른데 ?? 더 불편한거 같은데 ??라는 생각을 했다.

하지만 처음은 항상 힘든법.. 생각해보면 여기서 배우는 모든게 처음이긴하다. 그래서 항상 힘든 느낌이다.

힘든게 익숙해졌으면 좋겠다. 암튼 리액트 가보자고~!

---

React는 무엇인가 ?

React는 프론트앤드 개발을 위한 Javascript 오픈소스 라이브러리이다.

또한 React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다.

 

React의 특징

선언형

React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다. 선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만들어 줍니다.

리액트는 한 페이지를 보여주기 위해 HTML / CSS / JS로 나눠서 적기보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다.

 

컴포넌트 기반

스스로 상태를 관리하는 캡슐화된 컴포넌트를 만드세요. 그리고 이를 조합해 복잡한 UI를 만들어보세요. 컴포넌트 로직은 템플릿이 아닌 JavaScript로 작성됩니다. 따라서 다양한 형식의 데이터를 앱 안에서 손쉽게 전달할 수 있고, DOM과는 별개로 상태를 관리할 수 있습니다.

리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다.

컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있다.

 

한 번 배워서 어디서나 사용하기 (범용성)

기술 스택의 나머지 부분에는 관여하지 않기 때문에, 기존 코드를 다시 작성하지 않고도 React의 새로운 기능을 이용해 개발할 수 있습니다. React는 Node 서버에서 렌더링을 할 수도 있고, React Native를 이용하면 모바일 앱도 만들 수 있습니다.

리액트는 JavaScript 프로젝트 어디에든 유연하게 적용될 수 있다.

Facebook에 관리되어 안정적이고, 가장 유명하며, 리액트 네이티브로 모바일 개발도 가능하다.

 

 

JSX

 

React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법이다. 이 문법을 이용해서 React 엘리먼트를 만들 수 있다. JSX는 JavaScript가 확장된 문법이지만, 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아니다.

이때 이용하는 것이 바로 “Babel”이다. Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일한다. 컴파일 후, JavaScript를 브라우저가 읽고 화면에 렌더링할 수 있다.

JSX는 JavaScript 문법과 HTML 문법을 동시에 이용해 기능과 구조를 한눈에 확인할 수 있다.

 

React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다.

JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있다. 

 

주요 JSX 문법

• JSX에서 여러 엘리먼트를 작성하고자 하는 경우, 최상위에서 opening tag와 closing tag로 감싸주어야 한다.

 

• React에서 CSS class 속성을 지정하려면 "className"으로 표기해야 한다.
•  class로 작성하게 된다면 React에서는 이를 html 클래스 속성 대신 자바스크립트 클래스로 받아들이기 때문에 주의해야 한다.

 

• JSX에서 JavaScript를 쓰고자 한다면, 꼭 중괄호를 이용해야 한다.
• 중괄호를 사용하지 않으면 일반 텍스트로 인식한다.

 

• React 엘리먼트가 JSX로 작성되면 "대문자"로 시작해야 한다. 소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식을 하게 됩니다.
• 이렇게 대문자로 작성된 JSX 컴포넌트를 따로 사용자 정의 컴포넌트라고 부른다.

 

• 조건부 렌더링은 if문이 아닌 삼항연산자를 이용해야 된다.
• 논리 && 연산자로도 만들 수 있다!

삼항 연산자를 이용한 조건문

논리 && 연산자로 만든 조건문

 

• React 에서 여러 개의 HTML 엘리먼트를 표시할 때는 "map()" 함수를 사용한다.
• 또한, map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야 한다.

Key

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.
Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것입니다. 대부분의 경우 데이터의 ID를 key로 사용합니다.

 

렌더링 한 항목에 대한 안정적인 ID가 없다면 최후의 수단으로 항목의 인덱스를 key로 사용할 수 있지만 권장되지는 않는다.

 

컴포넌트 (Component)

• 컴포넌트(Component)란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻한다.
• 컴포넌트는 "하나의 기능 구현을 위한 여러 종류의 코드 묶음이다. 혹은 UI를 구성하는 필수 요소이다.
• 모든 리액트 애플리케이션은 최소 한 개의 컴포넌트를 가지고 있으며, 이 컴포넌트는 애플리케이션 내부적으로는 근원(root)이 되는 역할을 한다.
• 최상위 컴포넌트는 근원의 역할을 하므로 다른 자식 컴포넌트를 가질 수 있다. 이 계층적 구조(hierarchy)를 트리 구조로 형상화할 수 있다.

박스 하나하나가 다 컴포넌트다.

 

Create React App

Create React App은 리액트 SPA를 쉽게 빠르게 개발할 수 있도록 만들어진 체인이다. (SPA는 .. 다음에 알아보도록하자)

내가 이해한 바로는 SPA는 쉽게 말해서 한 개의 페이지에 필요한 것이나 수정하는 것만 가져오는 느낌 ??....

cd로 설치할 곳에 이동해주고 원하는 폴더명을 만든다. 그리고 그 뒤에 만든 폴더로 들어간다음

npx create-react-app을 써준뒤 원하는 파일 명을 써주면 끝이다..!! 참 쉽다!

Happy hacking이라는 문구가 뜨면 성공!! 안되면 유감