[React 공식 홈페이지 번역 01] 리액트란 무엇인가??

개발/React 2018. 9. 30. 23:54

[What Is React?]


공식 홈페이지 링크 주소 : https://reactjs.org/tutorial/tutorial.html#what-is-react

React는 사용자 인터페이스(UI)를 구축하기위한 

선언적이고 효율적이며 유연한 JavaScript 라이브러리이다. 

이 도구를 사용하면 "구성 요소(Component)"라는 작고 분리된 코드 조각으로 

복잡한 UI를 작성할 수 있다. 기본 예제는 다음과 같다.


class ShoppingList extends React.Component {
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}

위와같이 재미있는 XML과 유사한 태그를 사용할 것이다. 

컴포넌트를 사용하여 React에게 화면으로 보고 싶은 것을 알려준다.  

데이터가 변경되면 React는 효율적으로 Component를 업데이트하고 다시 렌더링한다.

여기서 ShoppingList는 React Component 클래스 또는 React Component 유형이다. 

Component는 props ("속성[properties]"의 약자)라는 매개 변수를 사용하고,

render 메서드를 통해 표시 할 뷰의 계층을 반환한다.

render 메서드는 화면에 표시 할 내용에 대한 설명을 반환한다.

React는 설명을 취해 결과를 표시한다. 

특히, render는 React 요소를 반환하는데, 이것은 렌더링 할 내용에 대한 간단한 설명이다. 

대부분의 React 개발자는 "JSX"라는 특수 구문을 사용하여 이러한 구조를보다 쉽게 ​​작성한다. 

<div /> 구문은 빌드시 React.createElement ('div')로 변환됩니다. 위의 예는 다음과 같다.


return React.createElement('div', {className: 'shopping-list'},
React.createElement('h1', /* ... h1 children ... */),
React.createElement('ul', /* ... ul children ... */)
);

createElement ()에 대한 자세한 내용은 API 참조 문서에서 확인할 수 있지만 

이 튜토리얼에서는 사용하지 않을 것이다. 대신에 JSX를 계속 사용할 것이다.

JSX는 JavaScript의 모든 기능을 제공한다. 

JSX 내부의 중괄호 안에 JavaScript 표현식도 넣을 수 있다. 

각 React 요소는 변수에 저장하거나 프로그램에서 전달할 수있는 JavaScript 객체이다.

위의 ShoppingList 구성 요소는,

 <div /> 및 <li />와 같은 HTML에서 사용되는 기본 제공 DOM 구성 요소 만 렌더링한다. 

그러나 사용자 정의 React 구성 요소도 작성하고 렌더링 할 수 있다. 

예를 들어 ShoppingItem이라는 컴포넌트를 생성하여, 이 컴포넌트를 호출하여 사용할 수 있다.

<ShoppingItem />과 같이 작성하면 된다. 이렇게 하면, 쇼핑 항목을 참조 할 수 있다. 

각 React 구성 요소는 캡슐화되어 독립적으로 작동 할 수 있다. 

이를 통해 간단한 구성 요소를 조각조각 모아 하나의 복잡한 UI를 작성할 수 있게 된다.


 









'개발 > React' 카테고리의 다른 글

[React] JSX란 무엇이며, 어떻게 사용하는가??  (1) 2018.10.04
[React] 리액트 참고 블로그 & 도움이 될 만한 블로그 정리  (0) 2018.10.02
[React] react render 함수에서 a태그의 href값을 동적으로 변경하고 싶을때 .  (0) 2018.08.31
[React] Reactjs code snippets을 설치해서 리액트 코드 템플릿 자동 생성하기  (0) 2018.08.27
[React] Windows에서 npm 설치 오류 발생시 해결 방법...  (0) 2018.08.26
Posted by sungho88
,

[React] 클래스 컴포넌트와 함수형 컴포넌트의 차이점과 사용법

개발/React 2018. 7. 31. 11:38

모든 컴포넌트에 state가 있어야 하는것은 아니다.


어떤 컴포넌트는 state정보가 없는 stateless 컴포넌트도 있을 수 있다. 


이들은 오직 props만 갖고 있다.


그리고,


stateless 컴포넌트는 클래스 형태가 아니라 함수(functional) 형태로 작성해야 한다.


stateless = 함수형 컴포넌트

state = 클래스 컴포넌트



class NoState extends Component {
render() {
return (
<p>MoviePoster 컴포넌트입니다</p>
)
}
}

export default NoState;


위와 같이 state를 사용하지 않는 컴포넌트는 클래스를 사용하지 않고


함수형 컴포넌트를 사용한다.


이 컴포넌트들은 그냥 return을 하기 위해 존재한다.(=화면에 뷰를 보여주기 위해 존재한다)


따라서, state뿐만 아니라 리액트 컴포넌트 라이프 사이클조차 필요없다.


사용 못 한다. 사용 안 하는것이 아니라 할 수 없다.



function NoState({title}) {
return(
<img src={title} alt="This is Title image"/>
)
}



정리


함수형 : state 사용 불가 / render() 함수도 없고, 라이프 사이클도 존재하지 않음 / 오직 return만 갖고 있음.

클래스 : state 사용 가능 / render() 함수가 존재, 라이프 사이클도 존재함.



+ 추가


클래스를 함수형 컴포넌트로 변형할때,



export default Movie


도 제거하는 경우가 발생한다.


하지만, 이것은 컴포넌트를 외부에서 사용할 수 있게 선언하는 문장이므로 삭제하면 안된다.


함수형이던, 클래스 형태건 둘 다 컴포넌트이기 때문이다.



이러한 에러가 발생한다. 그렇게 되면 


컴포넌트 하단에 


export default 컴포넌트명


이 존재하는지 확인해 볼 필요가 있다.

'개발 > React' 카테고리의 다른 글

[React] 리액트(React)로 파이어베이스(Firebase) 배포(Deploy)하는 방법!!!  (0) 2018.08.13
[React] 리액트 공식 홈페이지에서 개념을 쌓아보기.../  (0) 2018.08.02
[React] TypeError: Cannot read property 'map' of undefined  (0) 2018.07.31
[React] React에서 "key" prop 에러 && prop  (2) 2018.07.31
React 설치 : create-react-app할 때 주의점  (0) 2018.07.27
Posted by sungho88
,

티스토리툴바