프론트엔드8 [React 기본] 5. event 개인 공부 후 자료를 남겨놓기 위한 목적이므로, 생략되거나 오류가 있을 수 있음을 알립니다. 설명에 대한 지적은 언제나 환영입니다. :) 이 포스팅은 이전의 포스팅과 이어집니다. 2022.07.07 - [Develop/react] - [React 기본] 4. props + 생활코딩의 react 강의를 기본 베이스로 이것저것 추가 작성 필기입니다. 영상을 보고싶다면 다음의 링크를 접속해 보시는 것을 추천합니다.! https://opentutorials.org/course/4900 React - 생활코딩 리액트 입문자를 위한 수업입니다. 기본 문법과 핵심 개념을 익힐 수 있습니다. 만들게 될 것 앱 : https://egoing.github.io/react-2022-tutorial-src/ 소스코드 : ht.. 2022. 7. 7. [React 기본] 4. props 개인 공부 후 자료를 남겨놓기 위한 목적이므로, 생략되거나 오류가 있을 수 있음을 알립니다. 설명에 대한 지적은 언제나 환영입니다. :) 이 포스팅은 이전의 컴포넌트에 관한 포스팅과 이어집니다. 2022.07.07 - [Develop/react] - [React 기본] 3. 컴포넌트 만들기 props 인터넷에 쳐보면 나오는 props의 기본적인 의미는 하위 컴포넌트에 구성요소를 전해줄 때 사용하는 인자라고 설명한다. prop은 property(속성)의 약자로 상위 컴포넌트가 하위 컴포넌트에게 값을 전달하는 인자이다. 특성으로는 단방향 흐름을 가진다는 특징을 가진다. 예제를 통해 props를 어떤 식으로 사용하고 다루어야 하는지 알아보자. 다음의 코드에서 우리가 미리 만들어 놓은 컴포넌트 Header에 t.. 2022. 7. 7. [React 기본] 2. JSX 문법 개인 공부 후 자료를 남겨놓기 위한 목적이므로, 생략되거나 오류가 있을 수 있음을 알립니다. 설명에 대한 지적은 언제나 환영입니다. :) 들어가기에 앞서. 앞선 포스팅에서 우리가 계속해서 다루게 될 파일이라고 한 App.js를 봐보자. 뭔가 이상한 점을 확인할 수 있다. 그건 바로 javascript 파일 안에 html 문법이 있다는 것인데 놀랍게도 이 코드는 정상적으로 작동한다. 이 문법은 react에서 사용하는 JSX라고 하며 쉽게 말해 개발자들이 리액트를 좀 더 쉽게 개발하기 위해 html과 js를 섞어놓았다고 생각하면 된다. 물론 JSX 문법을 사용하지 않을 수도 있으며 이 경우에는 React.createElement('div', null, "Hello, World!") 와 같은 방법으로 코드를 .. 2022. 7. 6. [React 기본] 1. 리액트의 핵심과 환경 구축 개인 공부 후 자료를 남겨놓기 위한 목적이므로, 생략되거나 오류가 있을 수 있음을 알립니다. 설명에 대한 지적은 언제나 환영입니다. :) REACT REACT란? META(facebook)에서 개발한 오픈 소스 자바스크립트 라이브러리로, 프론트엔드 라이브러리이다. SPA (Single Page Application)를 전제로 하고 있기 때문에 리렌더링이 잦은 최근의 웹 생태계에서 빠른 퍼포먼스를 내는 것이 가능하다. React의 핵심 기능 리액트의 핵심 기능이라고 하면, 바로 사용자 정의 태그 (컴포넌트)를 만드는 것이라고 할 수 있다. "component (컴포넌트)"를 만듬으로서 타인에게 코드를 공유할 수도 있고, 받을 수도 있으며 개발의 영역이 확대되었다. 환경 구축하기 기본적으로 node.js 환.. 2022. 7. 6. 이전 1 2 다음
