TIL : React

영아·2021년 5월 6일
0

Wow 드디어 리엑트에 대해서 배우게된다 ...
배워보고 싶었던것인데 또 어떤 고난을 줄지 ㅋㅋㅋ 걱정이 된다.
이걸로 많은것들 만들었다고 하는데 나도 잘 배워서 ㅎ 유용하게 사용할 수 있으면 좋겠다.
🙏🏻🙏🏻


React

What is React?

웹페이지를 만들때 우리는 HTML + CSS + JavsScript 를 사용하거나 React ,Vue.js 와 같은 라이브러리를 사용하는 방법이있다. 요즘 웹페이지는 수많은 인터렉션이 생긴다! 수 많은 인터렉션이 일어나려면 수 많은 상태관리가 필요하다!

---> 편리하게 이것을 하기 위해 나타난 프레임워크 ---> 오늘부터 배울 React

리엑트는 component(하나의 의미를 가진 독립적인 단위 모듈)를 바탕으로 만들어짐!

컴포넌트를 통해 HTML,CSS를 <Component /> 처럼 사용 할 수 있다. 웹에서 쓰이는 각 요소를 컴포넌트로 만들어서 다른 프로젝트나 다른 곳에서 다시 쓸 수 있도록 만들어주는 큰 장점을 가지고 있다.


ES6

리엑트는 기본적으로 ES6를 바탕으로 작성된다고 한다!
기본적으로 7가지 개념은 알고 있어야한다.

  • Destructuring
  • spread operator
  • rest parameters
  • default parameters
  • template literals
  • arrow function
  • for-of loop

JSX

const element = <h1>Hello, world!</h1>;

위의 태그문법은? 무엇인가??
문자열도 아니고 HTML도 아니다 ...
이것은 JSX는 JavaScript의 확장문법

JSX란?
React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들입니다.
React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다.
React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다. -React 공식문서

아직까지는 이게 무슨 의미인지 잘 모르겠다 ...

DOM과 자바스크립트를 이용해서 만들던게 익숙해서 새로운 개념들이 이해가 안되고 어색하다 😩

JSX 규칙

  1. 반드시 하나의 엘리먼트로 감싸야한다 .
<div> 
  <div>
  	<h1>hello</h1>
  </div>
<div>
  	<h2>wailli</h2>
  </div>
</div>

2.자바스크립트 코드를 적용 할때는 { } 안에 작성해야한다.

class App extends Component{
  render(){
     const name = 'walli';
     return (
       <div>
       hello{name}!
       </div>
  );
 }
}
  1. JSX 내부에선 if문을 사용할 수 없다. (삼항연사자를 사용해야한다.)
<div>
  {
	(1+1 ===2)?(<h1>정답</h1>) : (<h1>탈락</h1>)
  }
</div>
  1. 엘리먼트의 클래스 이름을 적용할 때, className을 사용해야한다.
<div className='app-container'> hello </div>

Component & Props

함수 컴포넌트

Javascript 함수를 작성하여 만들 수 있다.

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

Props

Props는 속성을 나타네는 데이터이다. 객체 인자를 받은 후에 React엘리먼트를 반환 한다.

클래스 컴포넌트

ES6 class를 사용하여 컴포넌트를 만들 수 있다.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

State

  • State : 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값

  • Props vs State
    - Props는 외부로 부터 전달 받은 값
    -State는 내부에서 변화 하는 값

  • Props 적절한 예
    - 이름,성별

  • State 적절한 예
    - 나이,현재 사는곳, 취업여부, 결혼/ 연애여부


마무리

사실은 아직 정확하게 어떻게 사용되는지 잘 모르겠다 ...
간단한 스프린트 트위틀러 만들기도 했지만 DOM,Javascript를 사용해서 만든는것보다 어려운것같다 ㅠ.. 😫
정리한 개념도 나중에 다시한번 공부해서 이해해야겠다
역시 새로운것을 배우면 머리속이 혼란스럽다

profile
코딩 배우는 아이

0개의 댓글