wiki:javascript:react

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- wiki:javascript:react [2020/08/19 15:58]
jskim
+++ wiki:javascript:react [2023/02/14 21:54] (현재)
dhan
@@ 줄 16: / 줄 16: @@
   * [[https://velog.io/@youthfulhps/React-React%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0|WHY React?]]
 \\
+  * https://trends.builtwith.com/javascript/React
+  * 주요 적용 사이트: 에어비앤비, 인스타그램, 페이스북, 넷플릭스, 전자정부프레임워크
+  * 커뮤니티가 거대함;-)
+  * ReaceJs를 기반으로 하는 프레임워크도 있음 (안정성, 거대함)
+  * 계속 확장하면서 한계를 뛰어 넘으려고 노력함
 \\
+====JSX====
+   * JSX [JavaScript XML]
+   * 리액트를 위해서 개발된 자바스크립트 확장 문법.
+   * 자바스크립트 코드 내부에 HTML 태그 형태로 컴포넌트를 만들수 있다.
+   * 단순하게 태그를 만드는 기능 이외에도 태그 내부에 표현식을 삽입해서 출력하는 기능도 제공한다.
+바벨 (babel) : JSX 코드를 읽고 일반적인 자바스크립트 문법으로 변환해주는 라이브러리. 자바스크립트 코드 내부에 HTML 코드를 사용할 수 있다.
+<code>
+<script type="text/babel"></script>
+</code>
+\\
+<code javascript>
+const element = <h1>Hello, world!</h1>;
+const name = 'eleven';
+const element = <h1>Hello, {name}</h1>;    // 중괄호 안에서 변수 또는 함수를 사용할 수 있다.
+</code>\\
 >이클립스에서 React 시작하기
@@ 줄 24: / 줄 46: @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>  // babel. es6언어를 지원해주는 라이브러리 필요.
 </code>
+\\
+>[[wiki:javascript:react:SpringBoot+React|SpringBoot + React 연동하기]]
 ===== Case Study =====
+===== 강의 =====
+  * [[https://nomadcoders.co/react-for-beginners|ReactJS로 영화 웹 서비스 만들기]]
 ===== Tip =====
-[[https://babeljs.io/|Babel Compiler]]
+[[https://babeljs.io/|Babel Compiler]]\\
 [[https://codepen.io/pen?&editable=true&editors=0010|Codepen]]
 ===== Troubleshooting =====
 ===== Ref =====
-[[https://velog.io/@jkzombie/React-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0Eclipse|Recat 활용하기(Eclipse)]]
+[[https://velog.io/@jkzombie/React-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0Eclipse|Recat 활용하기(Eclipse)]] \\
-{{tag>react JSX eleven}}
+===== Terms =====
+   * Component [컴포넌트]
+     * 리액트에서 화면에 출력되는 요소를 의미한다.
+       - 루트 컴포넌트 [Root Component] : 가장 최상위에 배치하는 컴포넌트
+       - 클래스 컴포넌트 [Class Component] : 사용자가 직접 클래스로 만드는 컴포넌트
+       - 함수 컴포넌트 [Functional Component ] : 사용자가 직접 함수로 만드는 컴포넌트
+\\
+   * Container [컨테이너] : 컴포넌트를 출력할 상자
+{{tag> eleven react JSX 오션 주레피}}

/volume1/web/dokuwiki/data/attic/wiki/javascript/react.1597820289.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)