프로그래밍/React (11) 썸네일형 리스트형 리액트(React) - 클래스 컴포넌트 Ref 리액트를 공부하면서 쓰는 글이니 오류가 있을 수 있습니다. 오류가 있다면 알려주세요! ref는 reference의 약자로 참조를 뜻합니다. 기본 자바스크립트에서는 querySelector()나 getElementById() 같은 메서드를 사용하여 DOM 객체를 가져와 사용했습니다. 리액트에서는 컴포넌트를 이용해 DOM을 수정합니다. 따라서 보통은 컴포넌트 안에서 State 또는 Props를 이용해 화면 DOM을 변경하여 화면을 렌더링 합니다. 컴포넌트에서 DOM을 직접적으로 변경해야 하는 상황이 있을 때 DOM 객체를 가져와야 하는데요. 이때 사용하는것이 ref입니다. ref에 DOM의 객체를 가지고 있습니다. ref는 직접적으로 DOM 수정해야 하는 경우 사용됩니다. 이때 ref는 DOM 또는 컴포넌트.. 리액트(React) - 이벤트 리액트를 공부하면서 쓰는 글이니 오류가 있을 수 있습니다. 오류가 있다면 알려주시기 바랍니다. 이번에는 리액트에서 이벤트를 사용하는 방법을 알아봅니다. 리액트에서 이벤트는 DOM요소에만 이벤트를 사용할 수 있습니다. 따라서 컴포넌트 안에 있는 요소에 이벤트를 추가해야 합니다. 코드와 같이 기존 HTML에서는 이벤트에서 함수를 호출하거나 간단한 코드를 적어 적용했습니다. 리액트에서 이벤트를 줄 때는 함수를 전달해주어야 합니다. class Test extends Component { render() { return ( {alert("클릭이에요!");} }> 클릭 ); } } export default Test; 화살표 함수나 따로 함수를 선언하여 함수를 전달하면 됩니다. 화살표 함수가 아닌 함수로 전달한다면.. 리액트(React) - 컴포넌트, props, state 간단 설명 리액트를 공부하면서 쓰는 글이니 오류가 있을 수 있습니다. 오류가 있다면 알려주시기 바랍니다. 컴포넌트(Compoent) 컴포넌트는 재사용이 가능한 React 엘리먼트를 반환하는 하나의 구성 요소이다.. 즉 리액트에서 뷰를 표현하는 하나의 구성요소입니다. 리액트 컴포넌트의 종류 리액트의 컴포넌트는 함수형 컴포넌트, 클래스형 컴포넌트가 존재합니다. 함수형 컴포넌트 - JavaScript에서 사용하는 함수를 이용해 만든 컴포넌트입니다. 클래스형 컴포넌트 - ES6에서부터 지원하는 class 문법을 이용해 만든 컴포넌트입니다. props props는 properties의 줄임말이며 컴포넌트 속성을 설정하는 요소입니다. 해당 props 값은 컴포넌트를 사용할 때 설정이 가능합니다. // Test.js - Com.. 이전 1 2 다음