IT321 코드 import React from 'react'; 리액트를 불러와서 사용할 수 있게 만들어 준다. 리액트 프로젝트를 만들 때에는 node_modules라는 디렉토리도 함께 생성되며, 프로젝트 생성 과정에서 node_modules 디렉터리에 react 모듈이 설치 된다. import를 통해 리액트를 불러오게 된다. 모듈을 불러와서 사용하는 것은 브라우저에 없는 기능이며 이는 Node.js에서 지원하는 기능이다. Node.js에서는 import가 아닌 require라는 구문으로 패키지를 불러온다. 이러한 기능을 브라우저에서 사용하기 위해서 번들러를 사용한다. 번들러는 파일을 연결해 준다. 주로 사용하는 번들러는 WebPack이다. 번들러 도구를 사용하면 모듈을 불러왔을 때, 불러온 모듈을 모두 합쳐서 하나의 .. 2019. 10. 24. 토비 스프링 - 템플릿 / 콜백 템플릿 : 프로그래밍에서는 고정된 틀안에 바꿀 수 있는 부분을 넣어 사용하는 경우를 말한다. JSP는 HTML이라는 고정된 부분에 EL과 스크립릿이라는 변하는 부분을 넣은 일종의 템플릿 파일이다. 템플릿 메소드 패턴 : 고정된 틀의 로직을 가진 테플릿 메소드를 슈퍼클래스에 두고, 바뀌는 부분을 서브클래스의 메소드에 두는 구조로 이루어진다. 콜백 : 실행되는 것을 목적으로 다른 오브젝트의 메소드에 전달되는 오브젝트. 파라미터로 전달되지만 갑을 참조하기 위한 것이 아니라 특정로직을 담은 메소드를 실행시키기 위해 사용된다. 자바에서는 메소드 자체를 파라미터로 전달할 방법은 없어 메소드가 담긴 오브젝트를 전달해야 한다. 다른 말로 펑셔널 오브젝트라고도 한다. 2019. 10. 23. react 설정과 JSX 특징 Bable : ECMA6를 5로 변환시켜 호환을 지원해준다. react : component reactDOM : rendering 15이상부터 2가지 모두 필요 class ES6에서 새로 추가된 문법 class 선언 class Polygon { constructor(height, width) { this.height = height; this.width = width; } } static과 상속도 가능하다. 모든 React.Component는 render() 메소드를 가지고 있다. 컴포넌트가 어떻게 생길지 정의해준다. JSX 형식 React JSX는 XML 같은 문법을 native JavaScript로 변경해준다. ""로 감싸지 않는다. ()를 사용하지 않아도 오류 발생하지 않으나 가독성을 위해서 사용 .. 2019. 10. 21. React 개요 react : 자바 스크립트 라이브러리로 사용자 인터페이스를 만드는데 사용한다. 오직 View만 신경쓰는 라이브러리. 컴포넌트 : 특정 부분이 어떻게 생길지 정하는 선언체, 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의한다. 렌더링 : 사용자 화면에 뷰를 보여주는 것 초기 렌더링 : 어떤 UI 관련 프레임워크, 라이브러리를 사용하든지 간에 맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요하다. 리액트에서는 render 함수를 통해 다룬다. render() {...} render() 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다. 컴포넌트 내부에는 또다른 컴포넌트들이 들어갈 수 있으며, 이때 render() 함수를 실행하면.. 2019. 10. 21. 이전 1 ··· 41 42 43 44 45 46 47 ··· 81 다음