본문 바로가기

react21

[React] ref 오늘은 ref에 대해서 공부해보았다. 리액트를 다루는 기술 책을 보면서 공부를 하다가 ref에 대해서 이해가 부족해서 공식문서를 찾아보게 되었다. ko.reactjs.org/docs/refs-and-the-dom.html ref(Reference) ref는 레퍼런스라는 뜻인데, 이를 번역하면 참조라는 말이다. 과연 코딩에서 참조라는 것은 어떤 것을 뜻하는 것일까? 원래 다른 언어를 배울 때, 참조는 복제와 비교가 되었었다. 복제는 파일을 복사하는 것이라면, 참조는 바로가기를 만드는 것과 같다고 비유되었다. 참조는 원본 파일에 대한 주소 값이 담겨있어서 누군가가 이 바로가기에 접근했다면 여기에 저장된 원본의 주소를 참조해서 원본의 위치를 알아내고 원본에 대한 작업을 하게 되는 것이다. 쉽게 말하면, 원격으.. 2021. 1. 1.

[React] JSX ❗아래 내용은 [리액트를 다루는 기술] 책에서 공부한 내용을 요약하였습니다. JSX란 자바스크립트의 확장문법이며, XML과 매우 비슷하게 생김 JSX를 사용하면,,, 편하게 렌더링 가능 HTML코드와 유사해서 보기 쉽고, 익숙 컴포넌트를 HTML태그 쓰듯이 사용하면서 활용도가 높음 예시) import React from 'react'; function App(){ return( 리액트 안녕! 잘 작동하니? ); } export default App; 위의 코드처럼 h1태그와 h2태그가 div태그 하나로 감싸져있다. 이렇게 리액트 컴포넌트에서 요소 여러 개를 하나의 요소로 감싸는 이유? 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문 조건부 연산자 JSX 내부의 자바스크립트 .. 2020. 12. 23.

[React] 이벤트 핸들링 EVENT = 특정 '사건' 버튼 클릭 이벤트 => 사용자가 버튼을 클릭한 사건 HTML Activate Lasers HTML onclick이 소문자로 이루어져있음 이벤트를 처리할 함수를 큰따옴표("")로 묶어서 표현해놓았음 React Activate Lasers React onClick의 C가 HTML과 다르게 대문자로 나타냄 이벤트를 전달할 때 문자열이 아닌 함수(이벤트처리 함수)를 전달 Camel Case 파일, 변수, 함수 등 대상의 이름을 띄어쓰기 없이 짓기 위함 리액트의 함수 핸들링에서 사용됨 Event handler = Event Listener 이벤트를 처리하는 함수 어떤 사건이 발생하면, 사건을 처리하는 역할 이벤트 핸들링 공식 문서 쉬운 예시(onClick 사용) JS) onClick .. 2020. 11. 30.

이전 1 2 3 4 다음

티스토리툴바