쿠다의 공부 블로그

📝Styling 리액트 컴포넌트를 어떻게하면 원하게 만들고 원하는 곳에 배치 가능한지 알아보자 📝CSSCSS 선택기 (w3schools.com) CSS SelectorsW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.www.w3schools.com🚩 배치 관련 속성화면에 엘리먼트들을 어떻게 배치할 것인가를 설정한다. display엘리먼트를 어떻게 표시할 지 방법에 따라 설정하는 것 div { disp..

📝 Forms폼 = 양식사용자로부터 입력을 받는 것의 총칭이다.HTML Form 이름 제출🚩 리액트의 Controlled Componentimport React, { useState } from "react";function NameForm(props){ const [value, setValue] = useState(''); const handleChange = (event) => { setValue(event.target.value); } const handleSubmit = (event) => { alert('입력한 이름: ' + value); event.preventDefault(); ..

📝 Handling EventEvent란 무엇일까?컴퓨터 프로그래밍에서 이벤트는 상호작용 즉 사건이라 보면 된다.돔의 이벤트 Activate버튼이 눌리면 함수를 호출하게 하는 onClick을 통해 전달한다. 리액트의 Event Activate  🚩 Event Handler 정의하기이벤트 핸들러는 이러한 이벤트를 적용하는 역할을 한다.import React from 'react';class MyComponent extends React.Component { handleClick = () => { alert('버튼이 클릭되었습니다!'); }; render() { return ( 클릭하세요 ); }} 📝 Conditional Rendering컨디셔..

📝State란 무엇일까?리액트의 핵심인 State는 한글로 상태를 뜻한다.리액트에서의 상태는 리액트 Component의 상태를 의미한다.쉽게 말하면 리액트의 변경 가능한 데이터를 State라고 한다. 🚩 중요점State는 렌더링이나 데이터 흐름에 사용되는 값만 포함 시켜야 한다.스테이트를 변경할 경우 재렌더링 되기 때문에 성능 저하가 발생할 수 있기 때문이다. State는 JavaScript의 객체이다.  위 사진은 클래스 컴포넌트를 나타내며 constructor는 생성자이다.붉은 네모칸이 바로 State를 정의하는 부분이다.🚩 State는 직접 수정하면 안된다.이 말의 의미가 무엇이냐면 자바로 관점에서 class의 객체를 직접 수정하면 안되듯이 리액트에서 getter, setter를 사용해야 한다..

📝 Elements엘리먼트란?엘리먼트는 리액트 앱의 가장 작은 구성 블록이다.DOM Elements VS React Elements리액트 엘리먼트는 DOM 엘리먼트의 가상 정보이다. DOM 엘리먼트는 리액트 엘리먼트보다 더 많은 정보를 담고 있어 무겁다.Elements는 화면에서 보이는 것들을 기술한다.const element = Hello, world;위의 코드를 봐보자이 코드가 실행될 때 대입 연산자의 오른쪽 부분은 React의 CreateElement 함수를 사용하여 엘리먼트를 생성한다.리액트는 이러한 리엑트 엘리먼트를 통해 DOM 엘리먼트를 생성한다.또한 리액트 Elements는자바스크립트 객체 형태로 존재한다.{ type: 'button', props : { className : 'bg..

✔ 왜 리액트?원래 백엔드만 공부하려고 했는데... 이번 캡스톤 프로젝트에 프론트엔드가 없어서 공부해보기로 했다.어차피 백엔드도 프론트엔드 조금 알고있어도 손해는 아니잖아?   📝 SPA - Single Page Application하나의 페이지로 복잡한 HTML 환경을 구현할까?HTML 파일 하나로 바디 태그 내부를 동적으로 채워넣는 방법으로 사용한다.리액트는 이것을 채워넣는 역할을 한다.📝JavaScript자바 스크립트는웹 페이지를 생명을 불어넣듯이 동적으로 사용할 수 있게 해준다.스크립트 언어의 제일 큰 특징은 런타임에 코드가 해석되고 실행된다.🚩자바 스크립트의 자료형변수를 선언할 때 자료형을 선언하지 않고 var를 선언하는 동적 타이핑 방식을 사용한다.// 정수형let n1 = 1234;le..