javaScript&jQurey (39) 썸네일형 리스트형 [React] 4. React 컴포넌트(4) - 이벤트 처리 방법 4. React 컴포넌트(4) - 이벤트 처리 방법 이번 포스팅은 [ React에서 이벤트 handling 하는 방법 ] 입니다. : ) 1. 컴포넌트에서 DOM 이벤트 사용 - 컴포넌트에서 출력된 특정 DOM 객체에 이벤트 컴포넌트가 동작하기 위해선 DOM이벤트 프로퍼티를 사용해야 한다. - 우리가 흔히 쓰고 있는 HTML 엘리먼트의 이벤트들은 JSX내에서 'on + 이벤트명' 형태의 프로퍼티로 제공된다. ex) 프로퍼티 샘플 이벤트 명 JSX DOM 이벤트 프로퍼티 이벤트 호출 시점 click onClick 엘리먼트에 마우스나 키보드가 클릭 된 경우 change onChange 엘리먼트의 내용이 변경된 경우 submit onSubmit 폼의 데이터가 전송될 때 keydown onKeyDown 키보드 .. [React] 4. React 컴포넌트(3) - State 알아보기(React Hooks 사용) 4. React 컴포넌트(3) - State 관리 이번 포스팅은 [ React 컴포넌트 내용 중 State에 대한 내용 ] 입니다. : ) https://ko.reactjs.org/docs/state-and-lifecycle.html https://reactjs.org/docs/hooks-reference.html#usestate 1. state란? - 일반적으로 컴포넌트의 내부에서 변경 가능한 데이터를 관리해야할 때에 사용 한다. - 프로퍼티(props)의 특징은 컴포넌트 내부에서 값을 바꿀 수 없다는 것이었다. 하지만 값을 바꿔야 하는 경우도 분명 존재하며, 이럴때 state라는 것을 사용한다. - 값을 저장하거나 변경할 수 있는 객체로 보통 이벤트와 함께 사용된다. - 컴포넌트에서 동적인 값을 상태.. [React] 4. React 컴포넌트(2) - 프로퍼티(props)란? 4. React 컴포넌트(2) - 프로퍼티(props)란? 간단??? 하게 프로퍼티의 사용 방법을 알아 보자. https://ko.reactjs.org/docs/components-and-props.html 1. 프로퍼티(props)란? - 프로퍼티, props(properties의 줄임말) 라고 한다. - 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.(단방향 데이터 흐름 갖는다.) - 프로퍼티는 수정할 수 없다는 특징이 있다.(자식입장에선 읽기 전용인 데이터이다.) 2. 사용방법? - 프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용 한다. 1) 1개의 프로퍼티 넘기기 - 앞서 3개의 컴포넌트를 만들어 다음과 같은 화면을 구성하였다. .. [React] 4. React 컴포넌트(1) - 컴포넌트란? 4. React 컴포넌트(1) - 컴포넌트란? 리액트 공식 문서, 자습서에서 함수형 컴포넌트, 클래스형 컴포넌트라는 내용을 간단하게 알아보려고 한다.. 리액트의 꽃이라고 할 수 있고, 리액트로 작성된 화면은 컴포넌트로 구성되어있기 때문에 매우 중요하다. 리액트의 꽃이라 불릴 정도로 리액트에서 가장 중요한 요소이다. 일단 최대한 기본 개념만 살펴볼 수 있도록 하자. https://ko.reactjs.org/docs/components-and-props.html 1. 리액트 컴포넌트(Component)란? - 리액트로 만들어진 앱을 이루는 최소한의 단위 - 기존의 웹 프레임워크는 MVC방식으로 분리하여 관리하여 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있었다. 반면 컴포넌트는 MVC의 뷰를 독립적으.. [React] 3. React 엘리먼트 렌더링 3. React 엘리먼트 렌더링 리액트 공식 문서, 자습서에서는 컴포넌트를 알아보기 앞서 엘리먼트 렌더링이라는 내용을 기술하고 있어, 이부분도 가볍게 살펴 보고 가려고 한다. 이번장은 거의 공식문서의 내용이 다이니, 해당 문서를 참고하는것도 좋을 것 같다. https://ko.reactjs.org/docs/rendering-elements.html 1. 엘리먼트란? - 리액트에서의 가장 작은 단위 이다. - 화면에 표시할 내용을 기술 한다. ex) 엘리먼트 예시 const element = hello, GodDaeHee!~; - 위의 예시에서 보듯, 우리가 예전에 사용하던 브라우저의 DOM 엘리먼트와는 다르게 일반 객체로 볼 수 있다. - 쉽게 생각하면, 엘리먼트는 컴포넌트의 구성 요소이고, 반대로 컴포.. map, reduce 활용하기 안녕하세요. 이번 시간에는 map과 reduce 메서드에 대해 알아보겠습니다. 배열에 있는 바로 그 map과 reduce 맞습니다. 많은 분들이 forEach는 사용하시는데 map과 reduce는 잘 안 쓰시더라고요. 그리고 reduce가 뭐냐고 물어보면 덧셈하는 함수 아니냐고 하시는 분도 많이 봤습니다. ㅠㅠ 그래서 오늘은 제가 제일 좋아하는 메서드인 map과 reduce에 대해 알아보겠습니다. 제가 생각하기로는 자바스크립트 내장 메서드 중에서 제일 강력하고, 알아두면 다양한 곳에 활용할 수 있는 것이 바로 map과 reduce입니다. 얼마나 강력하냐면, 맵리듀스라고 이름지어진 프레임워크도 있습니다. (물론 오늘 다루는 내용은 아닙니다.) map map 메서드는 다음과 같이 사용합니다. 배열.map((.. [React] 2. JSX란? (정의, 장점, 문법) 2. JSX란? (정의, 장점, 문법) [ [React 에서 사용하는 JSX ] 입니다. : ) 이번엔 React에서 자주 사용하게될 JSX에 대해 알아보도록 하자. 1. JSX란? - JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다. - JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. - 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. ex) // 실제 작성할 JSX 예시 function App() { return ( Hello, GodDaeHee! ); } // 위와 같이 작성하면, 바벨이 다음과 같이 자바스크립트로 해석하여 준다. function App() { return Reac.. [React] 1. React 시작하기(2) - React의 주요 특징 1. React 시작하기(2) 리액트의 주요 특징 실전으로 들어가기 앞서 리액트의 가장 큰 특징을 알아보고 넘어 가려 한다. 1. 리액트(React)란? - React는 자바스크립트 라이브러리로 SPA(Single Page Application)을 위한 사용자 인터페이스를 구축하는데 사용된다. - 웹, 모바일 앱 등의 view layer를 처리하는 데 사용된다. - 페이지를 다시 로드하지 않고 데이터를 변경할 수 있도록 가상 돔(Virtual DOM)을 사용하여 웹 애플리케이션의 퍼포먼스를 최적화한 라이브러리이다. 2. 리액트의 특징 1. 컴포넌트(Component) - 리액트는 컴포넌트 기반의 라이브러리이다. - 웹 페이지에서 컴포넌트는 화면을 이루는 작은 요소들이다. - 컴포넌트들은 여러 화면에서 사.. 이전 1 2 3 4 5 다음
