분류 전체보기67 리액트 state 및 이벤트 다루기 #이벤트 리스닝 및 이벤트 핸들러 수행하기 현재까지 만든 페이지는 정적인 상태이고 하나의 초기상태(state)만을 가지고 있다. 현재상태에서 간단하게 상태(state)를 바꿀 수 있는 버튼을 하나 만들어보자. {props.title}의 상태를 바꿀 버튼을 만들어 줄 것이다. 리액트에서는 버튼이 클릭되었을 때 어떻게 반응할까? 기본 html element같은 기본 DOM 이벤트 요소에 모두 접근이 가능하다. MDN 문서에서 찾아보면 우리는 기본 element event 들을 볼 수있는데, 얘네들은 리액트에서 props와 동등한 것것으로 내장된 html 요소에 추가해서 이런 이벤트들을 수신할 수 있다. https://developer.mozilla.org/en-US/docs/Web/API/HTMLButton.. 2023. 2. 18. 컴포넌트 구성 분할 #컴포넌트에 일반 JS 논리를 추가하고 컴포넌트 분할하기 앞서 본 예시에서 처럼 컴포넌트는 재사용이 가능하고 값도 동적으로 받아올수 있게 되었다. 하지만 하드코딩으로 고정하고 싶은 값은 언제든 고정이 가능하다. 날짜 부분을 달력에서 나오는 것처럼 표시해주려면 어떻게 해주면 될까? 일단 날짜 부분은 이렇게 안에서 Month / Year / Day로 나눠서 구성을 해줘야한다. 지금 우리가 원래 받아왔던 날짜는 사람이 읽기 힘든 형태로 구성되어 있다. JS에서 date 객체중 하나인 toLocaleString()을 사용해서 형태를 변환해 줄 수 있다. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toL.. 2023. 2. 13. JSX #JSX 소개 JSX는 자바스크립트 XML을 의미한다. 결국 html을 XML이라고 할 수 있다 뒤에서 변환되고 있는 이 자바스크립트 코드들을 크롬 개발자도구를 켜서 살펴 볼 수 있다. sources 부분을 보면 여러가지 파일들을 볼 수 있고 복잡해보이는 코드들이 보인다. 얘네들은 변환된 코드다. 우리의 코드 뿐만 아니라 전체 리액트 라이브러리 소스 코드와 전체 리액트 돔 라이브러리 소스 코드를 포함한다. JSX는 기본적으로 우리가 사용하는 언어는 아니지만 브라우저에 맞게 변환된다. #리액트 작동방식 기본적으로 App.js 파일을 보면 function App() 이 안에 들어있다. 이건 자체 html요소를 구축한 것이다. 바로 이게 컴포넌트! 컴포넌트는 기본적으로 자체 html 요소일 뿐이다. 우리의 궁.. 2023. 2. 3. Basic of React # 모듈 소개 Component-Driven user Interfaces 를 만들기 위해서는 리액트가 필요하다 JSX 구문 component를 구축하는법, 사용법 리액트에서 데이터를 사용하는 법 : 정적인 데이터만 취급하지 않고 화면에 나타나는 어떤 것들이 변경될때 일부 데이터를 출력하거나 업데이트 한다. #컴포넌트란 무엇인가? 왜 리액트는 컴포넌트의 전부라고 하는가? 리액트는 사용자 인터페이스를 구축하는 자바스크립트 라이브러리다. React is a Javascript lirary for building user Interface. 리액트 없이도 사용자 인터페이스를 구축하는건 가능하지만 좀 더 복잡한 인터페이스를 구축할 때 작업은 좀 더 쉬워진다. React is all about "Components.. 2023. 1. 30. 이전 1 2 3 4 5 6 7 8 ··· 17 다음
