Event Handling이란 무엇일까?Event - 웹 내부에서 발생하는 사용자의 행동 (버튼 클릭, 메시지 입력, 스크롤 등등)Handling - 다루다, 취급하다, 처리하다=> 이벤트가 발생했을 때 그것을 처리하는 것 (웹에서 발생하는 사용자들의 행동을 처리하는 것) (버튼 클릭시 경고창 노출)각각의 버튼을 누르면 큰솔창에 메일, 카페, 블로그가 출력된다. 첫번째 방법onClick={() => { console.log(text); }} 위의 코드를 이벤트를 실질적으로 처리해서 이벤트 핸들러라고 부른다.  두번째 방법 - 변수로 지정해서 작성하기const Button = ({ children, text, color = 'black' }) => { const onClickButt..

Props로 데이터 전달하기Props란? 컴포넌트에 값 전달하기부모 컴포넌트가 자식 컴포넌트 들에게 마치 함수의 인수를 전달하듯 원하는 값을 전달해주는게 가능하다.이렇게 전달된 값을 props라고 한다.  props를 이용하면 좋은점props를 이용하면 컴포넌트를 마치 함수를 호출하듯이 전달하는 값에 따라서 각각 다른 UI를 렌더링하도록 만들 수 있다.전달받은  props의 값을 활용하는 방법props라는 매개변수에 객체 형태로 값이 저장되어있음으로 점 표기법을 사용해 props.text를 렌더링하도록 설정하면 버튼 안에 각각의 렌더링된다.  그렇다면 컬러의 값도 활용하려면 어떻게 해야할까? 버튼의 style을 color는 props의 color라고 설정해주면 된다. 버튼이 빨간색으로 렌더링된것을 확인할..

JSX로 UI 표현하기JSX란?확장된 자바스크립트 문법을 의미한다.이렇게 자바스크립트랑 HTML 코드를 혼용해서 작성가능하다.  ⚠️ JSX 주의 사항1. 중괄호 내부에는 자바스크립트 표현식만 넣는다. - 자바스크립트 표현식? 삼항 연산자나 변수의 이름처럼 특정 값으로 평가    중괄호 안에 if문을 작성하면 오류 발생2. 숫자, 문자열, 배열 값만 랜더링const Main = () => { const number = 10; const obj = { a: 1 }; return ( main {/* js값을 html로 렌더링하고 싶으면 js코드에 중괄호를 작성해야된다. */} {/* 삼항 연산자도 사용이 가능하다 */} {number % 2 === 0 ? '..

useRef - 새로운 Reference 객체를 생성하는 기능const refObject = useRef()refObject → 컴포넌트 내부의 변수(일반적인 값 저장 가능) useRefuseStateReference 객체 생성State 생성컴포넌트 내부의 변수 활용 가능컴포넌트 내부의 변수로 활용 가능어떤 경우에도 리렌더링 유발x값이 변경되면 컴포넌트 리렌더링 useRef를 이용하면 해당 요소에 Foucus를 주거나 요소의 스타일 변경 가능 1. 레퍼런스 객체의 활용 사례import { useRef } from 'react'; 리액트로 부터 이 useRef라는 함수를 불러온다. const refObj = useRef(); console.log(refObj);래퍼런스 객체란 이 Currnet라는 프로..