react14 [React] 이벤트 처리하기 document.querySelector('button').addEventListener('click', () => { ... })리액트에서는 이런 코드로된 명령형 코드를 사용하지 않는다.대신 리액트에 시키는 선언형 코드를 사용한다.그리고 이벤트 리스너를 요소에 추가하는 대신 해당 요소에 특별한 prop을 추가한다. 내장 요소 props내장 요소(button, input, li 등)는 on으로 시작하는 prop을 많이 지원한다. onClick={}onClick에 제공할 값을 함수여야 한다.이벤트가 발생할 때 실행해야 할 함수를 가리키기 때문이다.function handleClick() { ...} ...특정 이벤트가 발생할 때 호출해야 하는 함수엔 handle~로 시작하게 이름 짓는 것이 일반적이다.함.. 2024. 7. 9. [React] Prop(속성)으로 컴포넌트 재사용 Props컴포넌트의 주요 장점 중 하나는 재사용이 가능하다는 것이다.재사용 가능한 컴포넌트를 사용할 때마다 다른 데이터를 전달하고자 할 때 props가 사용된다.커스텀 컴포넌트는 커스텀 props을 추가할 수 있다.title, description, image들은 커스텀 속성으로 리액트에선 이걸 props라고 부른다.props의 값으로 스트링, 숫자, 객체, 배열 등 모든 형태를 전달할 수 있다. Props 사용하기일반 자바스크립트 함수에서 입력값을 받아 사용하려면 한 개 이상의 매개변수를 추가하면 된다.function fnName(param1, param2) {} 리액트도 비슷하지만 일반적으로 props라고 불리는 하나의 매개변수만 사용한다.function CompName(props) {} 커스텀 .. 2024. 7. 5. [React] 동적 값 출력 및 활용 JSX 또는 리액트에서 동적인 값을 출력할 때는 {} 중괄호를 사용한다.{…} 태그 사이 속성값으로 {} 중괄호 안에 자바스크립트 표현을 자유롭게 추가할 수 있다{1+1}{reactArray[0]} 태그 안에서 사용 {reactDescriptions[genRandomInt(2)]} ... const reactDescriptions = ['Fundamental', 'Crucial', 'Core'];function genRandomInt(max) { return Math.floor(Math.random()*(max+1));}function Header(){ return ( React Essentials {reactDescriptions[genRan.. 2024. 7. 5. [React] JSX와 리액트 컴포넌트 JSXJavaScript Syntax Extension 자바스크립트 문법 확장자HTML 마크업 코드를 작성하여 HTML 요소를 설명하고 생성할 수 있게 한다.리액트는 UI 전체와 부분을 설명하고 생성하기 위한 것이므로 JSX가 리액트 컴포넌트로 사용된다하지만 브라우저는 JSX를 읽을 수 없다.리액트 프로젝트에서는 개발 서버가 실행되면 리액트 빌드 프로세스가 브라우저에서 사용 가능한 코드로 변환한다..jsx 대신 .js만 사용하는 리액트 프로젝트로 있다.빌드 프로세스가 .js 파일 안에서도 JSX 코드를 찾을 수 있기 때문이다.리액트에서 컴포넌트로 인식되기 위한 두 가지 규칙이 있다.함수 제목이 대문자로 시작되어야 함함수에서 렌더링 가능한 값이 반환되어야 함 컴포넌트 생성function Haeader() .. 2024. 7. 5. [JS] import 와 export 사용하는 방법 import/export 문법은 여러 파일에 코드를 분리해 관리하기 위함이다. export / import {...} fromutill.jsexport let apiKey = "adfasdgkl";작성된 변수나 함수를 다른 파일에서 사용하려면 export를 추가해 준다.app.jsimport { apiKey } from "./utill.js"console.log(apiKey);다른 파일의 변수나 함수를 사용하려면 import { 변수나 함수명 } from “파일 경로”를 작성한다.리액트는 파일명에 확장자(. js)를 쓰지 않아도 된다. 빌드 프로세스가 알아서 확장자(.js)를 추가하기 때문이다. 빌드 프로세스가 없는 자바스크립트는 확장자를 입력해야 한다.변수나 함수명은 대소문자 구분해서 똑같이 입력한.. 2024. 6. 19. [React] 리액트는 어떻게 작동할까? 리액트는 빌드 프로세스를 사용한다.즉, 작성한 코드가 그대로 브라우저에서 실행되지 않고, 브라우저에 전달되기 전에 내부적으로 코드가 수정되는 것이다. package.json 파일에서 프로젝트가 사용하는 모든 의존성 라이브러리들을 확인할 수 있다.이 중 react-scripts 패키지는 브라우저에 전달되기 전에 코드를 변환하는 다양한 툴을 제공한다.그 중 하나가 HTML 파일 안에 script를 추가하는 것이다.백그라운드의 빌드 프로세스가 script 요소를 생성하고 HTML 파일에 추가한다.개발 서버가 소스 코드를 확인소스 코드를 변환HTML파일에 script 요소 추가변환된 소스코드 로드 왜 이런 빌드 프로세스를 사용할까?리액트 코드는 따로 처리하지 않으면 브라우저에서 실행할 수 없기 때문이다.리액트는.. 2024. 6. 19. 이전 1 2 3 다음 반응형