태기의 개발 Blog 태기의 개발 Blog

React/기본

• React - React의 탄생

  React/기본 2020. 5. 17. 12:00

  React의 탄생 React가 생기기 전에 순수 자바스크립트를 통해 브라우저를 관리해왔다. 하지만, 순수 자바스크립트만으로는 대규모의 웹 프로젝트를 관리하기가 어렵고, 성능도 많이 떨어졌다. 이러한 문제들을 해결하기 위해 시간이 지나고 수많은 라이브러리(ex. React)와 프레임워크(ex. Angular, Vue.js)들이 나오기 시작했다. 그중 우리가 공부할 리액트는 페이스북 개발 팀에서 개발한 것이며, 최대한 성능을 아끼고 편안한 사용자 경험을 제공하면서 구현하고자 만들어졌다고 한다. React와 다른 프레임워크의 차이 먼저, React와는 달리 Angular, Vue.js와 같은 프레임워크는 보통 MVC, MVW 아키텍처로 애플리케이션을 구조화한다. 이러한 구조들의 공통점은 모델(Model)과 뷰..

  Read More
• React - React의 router

  React/기본 2020. 5. 15. 12:00

  Routing란? 간단히 말하면, 경로 이동 혹은 페이지 이동이라고 생각하면 된다. 예를 들어 사용자가 로그인을 위해 /Login에 접근했을 때, react-router는 로그인 페이지를 렌더링 해준다. 하지만, Create React App(CRA)에 특별히 routing(경로 이동)을 위한 로직이 들어있지 않기 때문에 따로 설치해서 사용해야 한다. 왜냐하면, React는 프레임워크가 아니라 오로지 뷰로만 이루어진 라이브러리 이기 때문에, 필요한 기능들을 따로 설치해서 사용해야만 한다. reacttraining.com/react-router/web/guides/quick-start React Router: Declarative Routing for React Learn once, Route Anywhe..

  Read More
• React - Component의 State

  React/기본 2020. 5. 13. 22:12

  state state란 말 그대로 컴포넌트의 상태 값을 의미한다. state와 props는 둘 다 Object이고, 화면에 보여줄 정보(상태)를 가지고 있다. 그런 점에서 서로 비슷한 역할을 한다. props는 컴포넌트를 사용하는 부모 쪽에서 전달해야만 사용할 수 있다. 마치 parameter(값)을 보내는 것과 같다. 반면, state는 컴포넌트 내에서 정의하고 사용한다. 특징 - state정의 할때, 반드시 constructor()함수를 호출하고 super()를 해줘야 사용 해야한다. - state 타입은 Object이고, 키와 값으로 이루어진 그 안에 배열, 객체와 같은 타입들을 다 담을 수 있다. ex) 이미지 리스트(배열) - 이벤트 발생 요소와 반영 되는 요소는 엄연히 다르다. 공부 할 예제를..

  Read More
• React - Component의 Props

  React/기본 2020. 5. 12. 14:40

  Component란? - 재사용 가능한 UI 단위라 부른다. Component를 왜 사용해야 할까? 만약, '회원정보 페이지'와 '회원정보 수정 페이지' 두 개의 페이지를 만들어야 한다. Component를 모르면 회원정보 페이지의 html과 css를 작성하고, 회원정보 수정 페이지의 html과 css를 작성할 것이다. 이렇게 동일한 코드를 두 번 작업하는 것은 상당히 귀찮은 일이다. 이럴 때, 동일한 코드가 반복되는 부분을 하나의 Component로 만들어서 같은 디자인 input이 필요한 곳마다 재사용 한다면 귀찮은 작업을 피할 수 있게 된다. 그렇기 때문에 Component를 써야한다. Component의 특징 Component는 독립적으로, 재사용이 가능한 코드로 관리할 수 있다. 컴포넌트도 in..

  Read More
• React - JSX

  React/기본 2020. 5. 12. 12:27

  JSX란? 자바스크립트의 확장 문법이다. JSX를 왜 사용하는 가? function App() { return ( Hello react ); } 이렇게 작성된 코드를 function App(){ return React.createElement("div", null, "Hello", React.createElement("b", null, "react")); } 이런 식으로 코드를 변환된다. 하지만 컴포넌트를 계속 랜더링 할 때마다 JSX 코드를 작성하는 것이 아니라 위에 코드처럼 매번 React.createElement 함수를 사용해야 한다면 매우 불편할 것이다. 그렇기 때문에 JSX가 생겨났고, JSX를 사용하면 매우 편하게 UI를 랜더링 할 수 있다. 그렇다면 JSX도 자바스크립트 문법이라고 할수있나?..

  Read More