리액트와 1일

웹, 데스크톱, 모바일 등 다양한 플랫폼에서 활용할 수 있는 프론트엔드 라이브러리.

이전에 나는 페이지 단위의 DOM 개발을 다뤘다면, 이제는 컴포넌트 단위의 개발을 다룬다.

 

React 

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.
                                                                                                                                                                     React

 

리액트는 유저 인터페이스(Ui)를 빌딩하기에 선언적, 효율적이며 유연한 자바스크립트 라이브러리다. 리액트는 컴포넌트라고 불리는 작고 독립된 코드 조각들을 가지고 복잡한 UI들을 만들게 해 줄 것이다. 

 

 

개발하다 보면, DOM이 많아져 상태 관리가 힘들어 지는 상황까지 가게 되자, 사람들은 기능 개발에만 집중하고 싶었했는데, 그래서 나온 라이브러리가 리액트, 앵귤러, 뷰.라고 한다. 

 

자세한 내용은 밑에 출처를 들어가서 찾아보세요!

reactjs.org/tutorial/tutorial.html

 

학습 목표 1. 리액트를 이용한 컴포넌트 단위 개발의 장점을 이해할 수 있다.

React Components
Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and returns HTML via a render function.
Components come in two types, Class components and Function components, in this tutorial we will concentrate on Class components. 
                                                                                                                                                                  w3schools

 

먼저, 컴포넌트 코드는 재사용이 가능하고 독립적이다. 자바스크립트 함수와 같은 목적을 가지고 수행하지만, 렌더 함수를 통해 HTML를 리턴하며 고립된 상태에서 작업한다. 컴포넌트는 클래스 컴포넌트와 함수 컴포넌트로 구성된다...

 

추상적인 말들이 덕지덕지 쓰여있어 자바스크립트 기초 지식이 없으면 더 이해하기 어려울 것 같다. 

난 이렇게 이해했다. 함수는 한 가지 기능을 갖도록 짜는 것을 권장한다. 왜냐하면,

한 함수에 2개 이상 기능이 존재하면, 함수 길이도 늘고 명확성이나 가독성이 떨어진다고 들었다.

실생활에 비유하자면,  cntrl + c는 복사 기능을 가지는데 붙여넣기 기능도 있다고 상상해볼 수 있겠다. 

 

 

자세한 내용은 밑에 출처를 들어가서 찾아보세요!

reactjs.org/tutorial/tutorial.html

w3schools.com/react/react_components.asp

 

학습 목표 2. JSX와 같이 선언적인 형태의 문법을 사용하는 것의 장점을 이해할 수 있다.

What is JSX?

JSX stands for JavaScript XML.
JSX allows us to write HTML in React.
JSX makes it easier to write and add HTML in React.                                                                               
                                                                                                                                                                  w3school

 

JSX는 JavaScript XML을 나타낸다.

JSX는 리액트에  HTML를 쓸 수 있게 한다.

JSX는 리액트에 HTML 추가와 작성을 쉽게 만들어준다.

 

 

자세한 내용은 밑에 출처를 들어가서 찾아보세요!

www.w3schools.com/react/react_jsx.asp

reactjs.org/docs/introducing-jsx.html

 

<앞으로 추가될 내용들>

학습 목표 3. 함수 컴포넌트와 클래스 컴포넌트를 만드는 방법과 차이를 이해할 수 있다.

학습 목표 4. props의 특징과 규칙을 이해할 수 있다.

학습 목표 5. props와 state와의 차이점을 이해할 수 있다.

학습 목표 6. 상태 변경 방법과, 그 이유를 이해할 수 있다.

학습 목표 7. 이벤트를 처리할 수 있다.

학습 목표 8. lifecycle을 통해 작동 원리를 이해할 수 있다.

학습 목표 9. React 컴포넌트 간 데이터 흐름 및 상호작용의 원리를 이해할 수 있다.

학습 목표 10. 비동기 호출과 같은 side effect를 컴포넌트 내에서 처리할 수 있다.