TIL-React Basic

sanghun Lee·2020년 8월 7일
Reactfront endweb
0

Today I Learned

목록 보기
40/66
post-thumbnail

library vs framework

프레임워크는 기반구조를 뜻하며 특정개념들의 추상화를 제공하는 여러 클래스나 컴포넌트로 구성 된 상호 협력하는 클래스와 인터페이스의 집합이다

라이브러리는 단순활용 가능한 도구들의 집합을 말한다.
개발자가 만든 클래스에서 호출하여 사용하며 클래스들의 나열로 필요한 클래스를 불러 사용하는 방식을 취하고 있다

쉽게말해 프레임워크는 사용자가 그 안에서 코드를 짜넣으며
라이브러리는 사용자가 전체적인 흐름을 만들고 라이브러리를 가져다 쓰는 것이라 할 수 있다.

node.js , npm, npx

node.js

node.js 는 node란 자바스크립트가 백엔드 환경에서 돌아갈 수 있게 해주는 것이다.
터미널에서 작동을 위해서는 terminal 들어간뒤 node를 타이핑하고 Js방식으로 작성하면 된다.

  • 나올때는 ctrl + c를 누르면 됨

npm(node package manager) that for js lang
package == library(남이 만들어놓은 소스코드)
개발자들이 다양한 라이브러리를 만들어서 npm을 통해 중앙관리가 된다
그걸 끌어서 쓸수 있음!!(수학, 이벤트, ui(검색바, 메뉴 등..))

리액트를 사용하는 이유!

원래 html에 sidebar, top, main등 하나의 파일에 다 넣어야하는데
리액트를 통해 컴포넌트를 만들면 변수와 같이 하나의 덩어리로 옮겨낼 수 있다.

  1. 가독성이 좋아짐
  2. 재사용성이 좋아짐
  3. 유지보수가 편리해진다.

기존에 DOM을 통해 각 객체끼리 연결되어있던 이벤트를 state를 거쳐 관리를 하게 되므로 data flow가 한결 일관성이 있어진다.

또한 props의 사용을 통해 parent/child관계를 직관적으로 볼 수 있어 편리하다(동의안함)

리액트를 실행시키기 위해서는 npm run start를 하면 시작이되며(터미널에서 당연히쳐야됨)

JSX, JSX element,attribute

JSX

JSX는 JavaScript의 확장버전으로 Syntax extension for Javascript라고 한다.
Html과 유사하게 생겼으며 js파일 내에서 작성이 가능하다.
ex)

const hi = <p>Hi</p>;

JSX element

Html 문법을 js코드내부에 써주면 그것이 JSX이다. .js파일 어디에서나 필요한곳에 작성하면 된다.
변수에 저장할 수도 있고, 함수의 인자로 넘길수도 있다.

const hi = <p>Hi</p>;

const Favorite = {
	food: <li>salad</li>,
    animal: <li>dog</li>,
    hobby: <li>programming</li>
};

JSX attribute

태그에 속성을 넣기위해서는 항상 쌍따옴표("")를 사용해야하고 추가하고 싶을때의 속성명은 Html과 다를 수도 있으니 React공식문서를 꼭 확인해야한다.

const hi =<input readOnly = {true}/>;
const Favorite = {
	food: <li>salad</li>,
    animal: <li>dog</li>,
    hobby: <li className="list-item">programming</li>
};

Self-Closing Tag

JSX에서는 어떤태그라도 self-closing tag가 항상 가능하다.
그러니까 아래의 두가지는 같은 표현이다
그리고 원래 셀프클로징 태그(Input과 같은)는 항상 마지막에 />로 끝내줘야한다.

<div />
<div></div>

Nested JSX

  1. 소괄호로 감싸기(필수이다)
const good =(
<div>
	<p>hi</p>
</div>
);
  1. 항상 하나의태그로 시작(첫 요소가 slbling이면 안된다.)
  • 이렇게 하면 안됨
    const wrong = (
<p>list1</p>
<p>list2</p>
);
``
  • 이렇게하면 됨
    const right = (
<div>
  <p>list1</p>
  <p>list2</p>
</div>

Rendering

html 요소(Element)또는 React요소 등의 코드가 눈으로 볼 수 있도록 그려진 것을 rendering이라 한다.

ReactDom.render

React 요소가 DOM Node에 추가되어 화면에 렌더되려면 ReactDOM,render라는 함수를 사용해야하며
첫번째인자에는 JSX로 React요소를 인자로 넘기고, 두번째 인자는 해당요소를 렌더하고 싶은 container(부모요소)를 전달한다.

ReactDOM.render(
	<h1>Hello, world!</h1> ### JSX로 React요소를 인자로 넘기고
    document.getElementById('root') ### 해당요소를 렌더하고 싶은 container(부모요소)를 전달한다.
);

Component

컴포넌트란 재사용 가능한 UI(User Interface)단위 입니다.

  • UI

    *휴대폰, 컴퓨터, 내비게이션 등 디지털 기기를 작동시키는 명령어나 기법을 포함하는 사용자 환경을 뜻한다. 이용자들이 IT기기를 구동하기 위해서 접촉하는 매개체로 컴퓨터를 조작할 때 나타나는 이른바 '아이콘'이나 텍스트 형태 구동화면도 포함된다. 스마트폰의 경우 애플리케이션 아이콘 형태 및 화면 구성을 가리킬 때가 많다.
    [네이버 지식백과] 이용자 인터페이스 [user interface] (한경 경제용어사전)

예를 들어 어떤 프로젝트에서 로그인, 회원가입페이지 등을 만들 때 input태그가 여러개 필요한데
이때 각자 다른 html에서 동일한 input요소 기입을 위해 동일한 html 코드를 각자 다른파일로 복사 붙여넣기 하기도 한다.

이럴 때 동일하게 들어가는 코드를 component로 만들어서 같은디자인의 input이 필요한 곳마다 재사용 할 수 있는 것이다.

컴포넌트는 독립적으로, 재사용 가능한 코드로 관리할 수 있으며 하나의 컴포넌트에 필요한 Html,css,js를 모두 합쳐서 만들수 있다.

Props

컴포넌트는 함수랑 비슷한데, 함수도 기능이 독립적이고 재사용 가능한것에 있어 유사한면이 있다.

  • 쉽게말해서 부모 컴포넌트로 부터 받는 값을 말한다.

    함수와 유사하게 컴포넌트도 Input을 받아 return을 할 수 있는데 react 컴포넌트에서 받는 input을 Props라고 한다.

return은 화면에 나타나야할 React요소가 return된다.

Component만들기

리액트는 컴퍼넌트를 만들고 관리하기에 정말 좋은라이브러리인데, react에서 컴포넌트를 만들때는 class나 함수로 만들 수 있다(상황에 따라 둘을 쓰는 조건이 존재한다.)

함수로 Welcome컴포넌트 구현하기
App.js

function Welcome(props) {
 retrun <h1>Hello, {props.name}</h1>;

index.html

<div id="root"></div>

class로 Welcome 컴포넌트 구현하기

class Welcome extends React.Component {
	render(){
    	return <h1>Hello, {this.props.name}</h1>
    }
}
  • class Welcome 컴포넌트를 구현할때는 React.Component 를 extend해서 생성합니다. 컴포넌트를 생성한다. 생성할때 render()메서드는 무조건 정의해야하며 return도 해줘야한다. render()메서드는 무조건정의해야한다는 말은 component를 만들때 필요한 메서드가 원래 더 있다는 말이다. 그런데 그중에서 render()만 필수이다.

Component사용

State

state란 말 그대로 컴포넌트의 상태 값이다.
state와 props는 둘다 obj이고 화면에 보여줄 정보를 가지고 있다는 점에서 서로 비슷한 역할을 한다.
props는 컴포넌트를 사용하는 부모쪽에서 전달해야만 사용할 수 있고(like parameter)
state는 컴포넌트 내에서 정의하고 사용해야한다.

ex) JS에서 DOM으로 서로 복잡하게 엮어져있던것을 state한곳으로 변화를 모아 state를 통해 변화(Event)를 가져가는것임

() => this.subsA(-1)
this.subsA(-1)의 차이

() => this.subsA(-1): 함수전체를 호출하는 것임

this.subsA(-1): 함수의 호출을 가져온것

setState({key: value(change)})

constructor

constructor()는 클래스의 instance가 생성될 때 항상 호출되는 함수(생성자)이다.
초기화할 값들을 constructor에서 세팅해준다고 보면 된다.

Props와 State

Props:부모컴퍼넌트에게서 전달받는 값.
state: Component자기 자신이 생성해서 수정 등의 관리를 할 수 있는 값.

class Button extends React.Component {

  constructor() {
    super(); // class의 instance가 생성될 때 항상 호출되는 함수이다.(초기화할 값들을 넣어주기)

    this.state = {
      clicked: false // click이라는 status
    }
  }

  render() {
    return (
      <div
        className={`btn ${this.props.type === 'like' ? 'like-btn' : ''}`}
        onClick={()=>{this.setState({ clicked: !this.state.clicked })}}
      >
        {this.state.clicked ? '좋아요' : '싫어요'}
      </div>
    );
  }
}

ReactDOM.render(
  <Button type="like" />,
  document.getElementById('root')
);

React Component LifeCycle

React 컴포넌트의 생애주기는 mouting(컴포넌트호출) -> constructor -> render(화면에 보임) ->DOM생성 ->componentDidMount(상태 업데이트, 새로운 props, setState로 state변경(만일 변경 될 시 다시 render()->update) -> componentDidUpdate ,, 컴포넌트 더이상 필요 없다면 ->(unmounting) ->componentWillUnmount

1.Html 수정하는 방법!

파일 중 눈여겨 봐야하는 것은 public파일의 index.html, src파일의 index.js, App.js
이다

해당파일의 index.html의 div태그의 id root는 index.js파일의 getElementById의 ID에 해당하는 것이며
그 위 적혀있는 <App />은 컴포넌트로서 작성되는 부분에 해당되는데 이것은 App.js에 존재하는 div class App의 내부 내용에 해당된다.

아래와 같이 App.js의 App classname내부를 수정하면 변경이 된다!

2.Css 수정하는 방법!

React에서의 방법이라기 보다는 create react app의 지배하에서의 수정이라 보면 된다
index.js에 보면 import'./index.css';라고 존재하는데
index.css를 수정해보자

위처럼 정의한 컴포터

JSX는 원래의 Js문법이 아니기 때문에 JSX문법이 js파일 내에 존재한다면 브라우저가 해석할 수 없다.

따라서 react.js를 사용하기 위해서는 jsx문법이 포함된 파일을 Js 정규 문법으로 변환시키는 커마일 과정이 필요하다.
따라서 보통의 과정에서는(내가배운건) scss를 사용하여 수정을한다.
terminal을 통해 쉽게 설치할 수 있으니 아래의 코드를 터미널에 쳐보자

npm install -g sass --save

2편으로 돌아와야징

profile
sanghun Lee
알고리즘 풀이를 담은 블로그입니다.
이전 포스트

HTTP & RESTful HTTP API

다음 포스트

TIL -인증&인가

0개의 댓글