꼼꼼히 살펴보자

Event Handling

HTML DOM에 클릭하면 이벤트가 발생하고, 발생하면 그에 맞는 변경이 일어나도록 해야합니다. JSX에 이벤트를 설정할 수 있습니다. Class Comp extends React.Component { render() { return ( { console.log('clicked'); }}>클릭 ) } } Event Hadling camelCase 로만 사용할 수 있습니다. onClick, onMouseEnter 이벤트에 연결된 자바스크립트 코드는 함수입니다. 이벤트 = {함수} 와 같이 씁니다. 실제 DOM 요소들에만 사용 가능합니다. 리액트 컴포넌트에 사용하면, 그냥 props로 전달합니다.

Props 와 State

Props 와 State Props 는 컴포넌트 외부에서 컴포넌트에게 주는 데이터 입니다. State 는 컴포넌트 내부에서 변경할 수 있는 데이터 입니다. 둘 다 변경이 발생하면, 렌더가 다시 일어날 수 있습니다. Render 함수 Props 와 State를 바탕으로 컴포넌트를 그립니다. 그리고 Props와 State 가 변경되면, 컴포넌트를 다시 그립니다. 컴포넌트를 그리는 방법을 기술하는 함수가 랜더 함수 입니다.

JSX

JSX란 React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등) 과 연결된다는 사실을 받아들입니다. React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 컴포넌트 라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아옵니다, React는 JSX 사용이 필수가 아니지만, 대부분의 사람이 Javascript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 결고 메시지를 표시 할 수 있게 해줍니다. ▶JSX 문법으로 작성된 코드는 순수한 Jav..

Components와 Props

Components와 Props 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. 이 페이지에서는 컴포넌트의 개념을 소개합니다. https://ko.reactjs.org/docs/react-component.html React.Component – React A JavaScript library for building user interfaces ko.reactjs.org 개념적으로 컴포넌트는 Javascript 함수와 유사합니다. "props"라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. ▶ 함수 컴포넌트와 클래스 컴포넌트 컴포넌트를 정의하는 가장 간단한 방법은 JavaScript ..

시작하기

리엑트를 시작하기전 기본적으로 리엑트를 설정하는 법을 간단하게 해보도록 하겠습니다. 리엑트를 시작하기전 node.js 및 npm 등등을 설치해야 합니다. 자세한 정보는 아래의 글을 참고해 주세요 https://growdeveloper.tistory.com/71 노드.JS 개요 및 설치 노드.JS 란 Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임. 프로그래밍 언어가 동작하는 환경! 런타임 = 프로그래밍이 동작하는 환경 노드js 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaS growdeveloper.tistory.com ▶ node 버전은 높은것으로 설정하는 것이 편할것입니다. ▶원하는 경로에 react 프로..

예외처리 마지막

사용자 지정 예외 만들기 기존의 정의된 예외 클래스 외에 필요에 따라 프로그래머가 새로운 예외 클래스를 정의하여 사용할 수 있다. 보통 Exception클래스 또는 RuntimeException클래스로부터 상속받아 클래스를 만들지만, 필요에 따라서 알맞은 예외 클래스를 선택할 수 있다. 가능하면 새로운 예외 클래스를 만들기보다 기존의 예외클래스를 활용하자. class MyException extends Exception { MyException(String msg) { super(msg); //조상인 Exception클래스의 생성자를 호출한다. } } Exception클래스로부터 상속받아서 MyException클래스를 만들었다. 필요하다면, 멤버 변수나 메서드를 추가할 수 있다. Exception클래스는..

예외처리3

메서드에 예외 선언하기 예외를 처리하는 방법에서는 지금까지 배워 온 try-catch문을 사용하는 것 외에, 예외를 메서드에 선언하는 아법이 있다. 메서드에 예외를 선언하려면, 메서드의 선언부에 키워드 throws를 사용해서 메서드 내에서 발생할 수 있는 예외를 적어주기만 하면 된다. 그리고 예외가 여러 개일 경우에는 쉼표(,)로 구분한다. void method() throws Exception1, Exception2, ExceptionN { //메서드의 내용 } 만일 아래와 같이 모든 예외의 조상인 Exception 클래스를 메서드에 선언하면 이 메서드는 모든 종류의 예외가 발생할 가능성이 있다는 뜻이다. void method() throws Exception { //메서드의 내용 } 이렇게 예외를 선..

예외처리 2

try-catch문에서의 흐름 try-catch문에서 예외가 발생한 경우와 발생하지 않았을 때의 흐름(문장의 실행순서)이 달라지는데, 아래에 이 두 가지 경우에 따른 문장 실행순서를 정리하였다. ▶ try 블랙 내에서 예외가 발생한 경우 1. 발생한 예외와 일치하는 catch블럭이 있는지 확인한다. 2. 일치하는 catch블럭을 찾게 되면, 그 catch 블럭 내의 문장들을 수행하고 전체 try-catch문을 빠져나가서 그 다음 문장을 계속해서 수행한다. 만일 일치하는 catch블럭을 찾기 못하면 예외는 처리되지 못한다. ▶try블럭 내에서 예외가 발생하지 않은 경우. 1. catch블럭을 거치지 않고 전체 try-catch문을 빠져나가서 수행을 계속한다. class ExceptionEx4 { publi..