pracoding 님의 블로그

버튼을 누르면 랜덤으로 명언이 화면에 나타나는 프로그램을 useState를 써서 만들어 보자.   결과물: 버튼을 누르면 또 다른 랜덤 명언이 나타난다

처음 리액트를 다운받고 실행해보면 너무나 많은 파일들이 있다는 것을 알 수 있다. index.jsapp.jspackage.jsonindex.htmlstyles.css 필자도 처음에 어떤 게 먼저 작동되고 원리가 무엇인지 애를 먹었다.하나씩 천천히 살펴보자. 1. Index.js : 앱의 진입점    리액트 앱을 실행할 때 가장 먼저 실행되는 파일이다.2. App.js : 메인 컴포넌트    일반적으로 전체 앱의 구조를 잡아주는 역할을 한다. 여러 개의 컴포넌트를 불러와서 조합하는 장소.3. package.json : 프로젝트의 정보와 의존성 관리    어떤 라이브러리를 설치했는지 기록해 둔 파일이다. 사실 리액트 코딩할 때 건드리는 부분은 아니기에 크게 신경 쓸 필요 없다.4. index.html : 실..

State(스테이트): 컴포넌트 내부의 데이터를 관리하고 이를 동적으로 변경한다. 기본적으로 React 컴포넌트는 정적인 UI를 렌더링하지만, 사용자의 입력을 받거나, 버튼 클릭으로 값이 바뀌어야 하는 등 동적인 UI로 만드려면 State가 필요하다. 상태가 변경되면 해당 상태를 사용하는 컴포넌트는 자동으로 재렌더링 된다. (필자는 움직임을 부여한다는 점에서 이전에 배운 자바 스크립트의 React 버전이라고 이해했다) 따라서 이전에 React만 사용하고 있을 때 import React from 'react';위의 방식처럼 선언했다면 state를 쓸 때에는 import React, { useState } from 'react'; 이렇게 써야한다.  const [ 변수, set변수] = useState(초기..

Props(프롭스) : 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용하는 방법    - 프롭스를 사용하는 이유 : 코드를 더 효율적으로 짜기 위해!       ex) Props가 없다면       import React from 'react';       function Greeting철수(){              return hi, 철수 ; }       function Greeting영희(){              return hi, 영희 ;}       function App(){             return (                                                                                           ..

위 코드는 Greeting() 이라는 함수를 사용하면서 만든 간단한 React 컴포넌트를 만든 예시이다.코드를 좀 더 뜯어보자면import React from 'react'; 이 부분이 생소하게 느껴진다.이 문장은 React 라이브러리를 현재 파일로 가져오는 기능을 가진다. 이 부분을 이해하기 위해서는 React의 특징을 좀 더 알아야 한다.React에서는 JSX를 사용하여 HTML과 비슷한 형태의 코드를 javascript 안에 작성한다.그렇기 때문에 JSX는 javascript로 변환되어야 한다.  +) 여기서 JSX란?JSX는 javascript XML의 약자로 HTML처럼 보이는 코드를 javascript 안에서 쓸 수 있도록 하는 문법이다. React를 쓸 때 JSX를 사용하면 HTML과 jav..

React는 프론트엔드 라이브러리로 사용자 인터페이스(UI)를 더욱 효율적으로 만들기 위해서 사용된다.컴포넌트 기반 개발 방식으로, UI를 더욱 작은 단위로 나누어서 개발할 수 있다는 장점이 있다.(컴포넌트 기반 개발 = UI를 여러 개의 작은 독립적인 구성요소 단위로 나누어서 개발하는 방식. 이 방식은 재사용성이 있고 유지와 보수가 쉬워 효율적이라는 장점이 있다. )React의 또 다른 주요 기능은 가상 DOM을 활용한다는 점이다.(DOM은 웹 브라우저가 HTML 문서를 해석해서 계층이 있는 트리 형태로 표현한 것이다.)기존의 HTML DOM은 HTML 문서를 객체(Object) 형태로 표현한 것으로 Javascript를 통해 HTML의 요소를 편집할 수 있었다.아래는 버튼을 클릭하면 Hello wor..

할 일 입력을 할 수 있는 to-do list 만들기(내용을 클릭하면 삭제할 수 있는 기능 추가)   Output:

: 1) 사용자 입력값이 없을 때 메시지 띄우기                       2) 사용자 입력값의 글자수가 15가 넘으면 메시지 띄우기 방법1:자바 스크립트에서 하는 방법 (if문 쓰기)  방법2:html에서 15 초과하지 않게 제한 두기 1) 아무 입력 안 했을 떄 2) 초과 입력 했을 때   방법1:  방법2: