Develop/react16 [React 기본] 4. props 개인 공부 후 자료를 남겨놓기 위한 목적이므로, 생략되거나 오류가 있을 수 있음을 알립니다. 설명에 대한 지적은 언제나 환영입니다. :) 이 포스팅은 이전의 컴포넌트에 관한 포스팅과 이어집니다. 2022.07.07 - [Develop/react] - [React 기본] 3. 컴포넌트 만들기 props 인터넷에 쳐보면 나오는 props의 기본적인 의미는 하위 컴포넌트에 구성요소를 전해줄 때 사용하는 인자라고 설명한다. prop은 property(속성)의 약자로 상위 컴포넌트가 하위 컴포넌트에게 값을 전달하는 인자이다. 특성으로는 단방향 흐름을 가진다는 특징을 가진다. 예제를 통해 props를 어떤 식으로 사용하고 다루어야 하는지 알아보자. 다음의 코드에서 우리가 미리 만들어 놓은 컴포넌트 Header에 t.. 2022. 7. 7. [React 기본] 3. 컴포넌트 만들기 개인 공부 후 자료를 남겨놓기 위한 목적이므로, 생략되거나 오류가 있을 수 있음을 알립니다. 설명에 대한 지적은 언제나 환영입니다. :) 이 포스팅부터는 리액트의 여러 기능과 구현에 대해서, 이해하기 쉽도록 파트별로 설명을 해볼 생각이다. 그 중에서 우리가 페이지를 만드는 부품인 컴포넌트에 대해 먼저 알아보도록 하자. component (컴포넌트) 앞선 포스팅에서 리액트의 본질은 "사용자 정의 태그를 만들어 활용하는 것" 이라고 했다. 이 사용자 정의 태그를 의미하는 것이 컴포넌트이며, 다음의 코드를 봐보자. html의 시멘틱 태그인 header, nav, article이 있다. 만약 이 태그들이 몇백, 몇천의 코드를 가지고 있다고 생각하면 우리가 지금 작성하고 있는 App이라는 function이 관리하.. 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 3 4 다음
