Refs, Portals를 활용하지 않고 문제 해결하기(state 활용) 페이지에 이름을 입력하면 환영인사가 이름으로 입력되도록 state를 활용하여 수정해보도록 하겠다. state를 활용해 버튼을 클릭할 때 동작이 이루어지도록 설정하고 'setSumitted(false);'를 추가해주어 입력을 수정할 때마다 같이 수정되는 것을 방지하고 입력창을 수정할 시 다시 'unknown entity' 문구가 페이지에 나타나도록 해주었다. import { useState } from "react"; export default function Player() { const [enteredPlayerName, setEnteredPlayerName] = useState(""); const [submitted, setSu..

컴포넌트와 마찬가지로 css 또한 파일을 분리하여 저장하는 것이 좋다. 관련한 css파일을 만들어주고 import를 이용해 스타일을 적용해준다. 바닐라 css 장점 1. css 파일을 import 하면 적용가능하며, 다른사람도 파일을 받아 작업하는 것이 가능하다. 2. css를 직접 작업할 수 있다. 모든 것은 작업하는 사람에게 달려있는 것이다. 단점 1. css를 알아야한다. 2. 다른 컴포넌트 간 css 충돌이 발생할 수 있다. 2번의 의미는 css가 원하는 컴포넌트로 스코핑되지 않을 수 있다는 것이다. 지정한 클래스나 id에 해당하는 모든 파일의 코드에 css가 적용된다는 것이다. 따라서 이는 크게 문제가 되지 않지만, 특정한 css만 적용하고 싶다면 inline css를 통해 해결할 수 있다. i..

디버깅(debugging) 디버깅이란 오류 메시지를 자세히 살펴보는 것으로 오류를 이해하고 찾아서 고치는 과정이다. 이전 글에서 만들었던 프로젝트를 기반으로 디버깅을 해보려 한다. 오류들을 하나씩 살펴보겠다. 1. Duration에 음수 값 대입 duration에 양수의 값만 대입할 때는 아무문제 없는 것처럼 보였으나, 0이나 음수의 값을 대입하자 페이지가 실행되지 않으면서 개발자 도구에 다음과 같은 오류 메시지가 떴다. 위 오류는 Uncaught TypeError로 정의되지 않은 값에 대한 오류이다. 즉, 음수에 대한 동작이 정의되어있지 않다는 의미로 valueEndOfYear 속성을 읽어오는 것에 실패했다는 것이다. 따라서 valueEndOfYear 속성에 접근하는 부분에서부터 오류 수정을 시작해보겠..

일부 필요한 계산 식과 기본 틀은 주어져 있는 파일을 사용하였다. 현재까지 배운 컴포넌트 분리, State 활용, 이벤트 핸들링, 양방향 바인딩, State 끌어올리기, 조건적 컨텐츠 출력 등을 활용하였다. 앱은 투자 금액, 이자 등을 계산해주는 내용이다. 다음은 시연 영상이다. 코드는 깃허브 주소를 올려두겠다. 시연 영상 깃허브 https://github.com/BB545/-react-Practice-Project-1

Fragment JSX 표현식은 하나의 상위 혹은 부모 요소를 가지고 있어야 한다. 값을 하나만 반환할 수 있기 때문이다. 따라서 두개이상의 값을 반환하려고 하면 상위 요소로 묶어 주어야한다. div태그와 같이 불필요하게 코드가 늘어나는 것을 방지하기위한 대안으로 fragment 컴포넌트가 있다. Fragment : 형제 컴포넌트를 감싸는 용도로 사용하는 특수한 태그(대안 : 빈태그) Feature 및 State로 컴포넌트 분리 예를들어, App컴포넌트를 간단하게 하기위해 새로운 파일을 형성해 컴포넌트를 분리해주었다. (import, useState 등 활용) 따라서 App컴포넌트에서는 컴포넌트 파일만 불러와서 사용하므로 코드가 많이 간결해진 것을 확인할 수 있다. function App() { retu..

컴포넌트 컴포넌트 : 재사용이 가능한 구성요소. : 전반적인 UI(=컴포넌트의 결합) 구축 가능. 복잡도와 상관없이 모든 리액트 애플리케이션에서 사용됨. -Header (헤더) -Care Concept Items (주요 개념 항목) -Interactive Tabs (상호작용 탭) 장점 : 복잡한 사용자 인터페이스를 관리하기 쉽도록 작게 분해하여 UI의 다른 위치에도 사용할 수 있게 해준다. : 비슷한 코드는 함께 저장된다. : 디자인과 개발 원칙을 따른다. 각 컴포넌트는 다른 기능이 있으므로 UI의 다른 부분을 처리한다. JSX JSX : 비표준의 자바스크립트 문법을 사용하기 때문에 사용한다. JavaScript 문법 확장자. : 자바스크립트 파일 내에 html 마크업 코드를 작성해 요소를 생성하도록 함..

화살표 함수 자바스크립트에서는 화살표 함수를 생성할 수 있다. 이름이 없는 함수를 다룰 때 주로 사용한다. function키워드를 사용해도 익명함수를 사용할 수 있다. 예를들어, export default를 이용하면 익명함수를 import하는 것과 같다. export default function() { console.log('Hello'); }; 그러나 익명함수를 이용할 때는 화살표함수를 사용하는 것이 더 간단하다. 매개변수 목록만 작성해준다. 여전히 return값도 함수 내용에 사용할 수 있다. export default (userName, message) => { console.log('Hello'); return userName + message; }; 화살표 함수를 다룰 때는 '구문 단축키'를 ..

자바스크립트 리액트를 본격적으로 공부하기에 앞서 기본이 되는 자바스크립트를 먼저 복습해주었다. html이 실행될 때 자바스크립트 파일이 같이 로드되도록 head 부분에 script태그를 추가해주었다. 또한 defer속성을 추가해 나머지 html 문서를 읽어와 파싱한 후에 스크립트가 import되고 실행되도록 만들어 주었다. 이렇게 하면 스크립트코드가 다른 html 요소를 사용해야할 때 자바스크립트가 실행되기 시작하면 html 요소가 이미 로드되어 있도록 해준다. 만약 defer요소가 없으면, 순서없는 리스트를 사용하려 했을 때 스크립트가 리스트보다 먼저 로드되어 리스트가 준비되지 않았을 수 있다. 이외에도 script 태그에 추가할 수 있는 속성으로 type 속성이 있다. type속성을 이용해 modul..

리액트란? 리액트를 사용하는 이유는 무엇일까? 리액트는 웹 및 네이티브 사용자 인터페이스를 위한 라이브러리이다. 쉽게 말해 사용자 인터페이스 구축을 위한 인터페이스이다. 더 나아가 사용자 인터페이스를 위한 자바스크립트 라이브러리 이다. 브라우저의 자바스크립트를 이용해 웹페이지와 페이지에 표시되는 사용자 인터페이스를 재로딩 없이 업데이트 할 수 있는 이유는 자바스크립트가 웹사이트의 백그라운드에서 실행되며 읽고 조작하는 것이 가능하기 때문이다. 예를들어, 넷플릭스 페이지에서 영화 탭을 클릭하면 자바스크립트는 페이지를 재로딩하거나 나가지 않고도 백그라운드에서 영화 데이터를 가져와 화면을 영화 데이터로 업데이트하고 부드럽게 전환되도록 해준다. 그러나 모두 자바스크립트 덕분이라면 리액트 라이브러리는 왜 필요한걸까..