사용자 도구

사이트 도구


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://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 시작하기 >이클립스에서 React 시작하기
줄 24: 줄 46:
 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>  // babel. es6언어를 지원해주는 라이브러리 필요. <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>  // babel. es6언어를 지원해주는 라이브러리 필요.
 </code> </code>
- +\\ 
 + 
 +>[[wiki:javascript:react:SpringBoot+React|SpringBoot + React 연동하기]] 
 ===== Case Study ===== ===== Case Study =====
 +
 +===== 강의 =====
 +  * [[https://nomadcoders.co/react-for-beginners|ReactJS로 영화 웹 서비스 만들기]]
    
 ===== Tip ===== ===== Tip =====
줄 33: 줄 61:
    
 ===== Ref ===== ===== 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.1597820297.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)