본문 바로가기

WEB/REACT23

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

[React] render() 함수 render함수에 대한 궁금증은 오늘 컴포넌트에 관한 리액트 공식문서를 보다가 시작됐다. 함수형 컴포넌트와 클래스형 컴포넌트의 차이에 대해서 공부를 하다가 render함수에 대한 의문이 생겼다. 위 문서를 보다가 지금까지 예제로 작성해봤던 코드들과 다르게 ReactDOM.render라는 함수가 쓰인것을 보게 되었다. 지금까지는 클래스형 컴포넌트에서 state값을 변경하기 위해서 render함수를 작성하는 것 밖에 없었는데 ReactDOM.render함수는 과연 어디에 쓰이는 것일까?라는 궁금증에 이곳저곳에 찾아보았다. render함수에 대한 공식문서(ko.reactjs.org/docs/react-dom.html#render)를 보게 되었을 때, ReactDOM.render함수는 최신의 React 엘리먼트.. 2020. 12. 30.

[React] 함수형 컴포넌트 VS 클래스형 컴포넌트 안녕하세요. 오늘은 컴포넌트에 대해서 알아보겠습니다. 컴포넌트는 인터페이스를 설계할 때 사용자가 볼 수 있는 여러가지 요소들을 뜻합니다. 컴포넌트는 props를 받아서 elelement를 출력하는 함수와 같습니다. 이러한 컴포넌트를 선언하는 방식으로는 두가지가 있습니다. 바로 함수형 컴포넌트와 클래스형 컴포넌트! 과연 둘은 어떤 차이가 있고, 어떤 기준으로 사용할 컴포넌트를 정하는게 좋을까요? 저는 이에 대한 내용을 '리액트를 다루는 기술' 책과 리액트 공식문서를 사용하여 공부했습니다. (ko.reactjs.org/docs/components-and-props.html#function-and-class-components) 제가 이해한 개념을 쓰는 것이기 때문에, 틀릴 수도 있다는 점! ✔코드비교 //함.. 2020. 12. 29.

[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 다음

티스토리툴바