insu90 님의 블로그

1. 리액트 이벤트 사용 시 주의사항#1 이벤트 이름이벤트 이름은 카멜 케이스로 작성해야 합니다.onclick (x) OnClick (x) onClick (o)onkeyup (x) OnKeyUp (x) onKeyUp (o)  #2 이벤트 핸들러JSX에서 이벤트 핸들러는 자바스크립트 코드가 아닌 함수 형태로 전달해야 합니다. // (x) alert('hello')}> // (o) ⇐ 함수를 화살표 함수로 직접 정의const handleClick = () => alert('hello'); // (o) ⇐ 외부에 정의한 함수 이름을 전달매개변수가 필요한 경우:const handleClick = (message) => alert(message); handleClick("Hello")} />이벤트 객체의 ..

리액트(React)는 상태(state)를 통해 컴포넌트의 동적인 동작을 가능하게 합니다. 상태는 일반 변수와 달리 변경 시 컴포넌트를 리렌더링하여 사용자 인터페이스(UI)에 즉각적으로 반영됩니다. 이 글에서는 상태의 정의, 클래스형 및 함수형 컴포넌트에서 상태를 관리하는 방법, 그리고 상태 관리 시 주의사항을 살펴보겠습니다. 1. 상태(state)란?상태는 컴포넌트 내부에서 읽고 업데이트할 수 있는 데이터입니다. 리액트는 상태가 변경될 때 컴포넌트를 자동으로 리렌더링합니다.⚠ 중요: 상태 변수는 일반 변수처럼 직접 수정할 수 없으며, 반드시 리액트가 제공하는 setState 메서드 또는 useState 훅을 사용해 업데이트해야 합니다.클래스형은 setState, 함수형은 useState가 반환하는 업데이..

React를 사용하여 간단한 신호등(Traffic Light) 컴포넌트를 만드는 방법을 소개합니다. 이 글에서는 여러 개의 컴포넌트를 만들고, 객체 배열을 활용하여 데이터를 출력하고, 동적인 스타일링을 적용하여 신호등의 색깔을 변경하는 기능까지 구현해보겠습니다. 1. 신호등 컴포넌트 만들기이제 신호등(Traffic Light) 컴포넌트를 만들어봅니다. 신호등은 빨간색, 초록색, 노란색 원을 출력하고, 각 원의 크기와 색상을 부모 컴포넌트로부터 전달받습니다.먼저 간단한 디자인부터 시작하겠습니다.function App() { return ( );}export default App;위와같이 나오는 것을 볼 수 있습니다. 이제 디자인은 되었으니 이를 컴포넌트를 ..

JSX는 JavaScript XML의 약자로, 자바스크립트에 XML/HTML 문법을 결합하여 간결하고 직관적인 UI 코드를 작성할 수 있는 문법입니다. 리액트(React)에서 컴포넌트를 정의하거나 UI를 구성할 때 주로 사용됩니다. 이 글에서는 JSX의 특징과 규칙, 그리고 주요 활용법을 소개합니다. 1. JSX란?JSX는 JavaScript와 XML의 조합으로, HTML 요소를 JavaScript 코드 안에서 작성할 수 있습니다. const element = Hello, World!;//위 코드는 Babel을 통해 일반 JavaScript로 변환됩니다.const element = React.createElement("h1", {}, "Hello, World!"); JSX의 장점HTML과 JavaScri..

이 글에서는 Axios와 jQuery를 사용하여 REST API에서 데이터를 가져오고, 국가 이름과 국기 이미지를 웹 페이지에 출력하는 방법을 단계별로 설명합니다. 추가적으로 검색 기능을 구현하여 특정 국가만 필터링해 출력할 수도 있습니다.사전 준비1. JSON Formatter 크롬 확장 설치REST API 데이터를 보기 쉽게 포맷해주는 JSON Formatter 크롬 확장을 설치하세요.https://chromewebstore.google.com/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=ko&pli=12. REST API 활용REST API를 통해 국가별 정보 데이터를 가져옵니다.URL: https://restcountries.com/v3...

JavaScript에서 배열은 자주 사용되는 자료구조입니다. 이 배열을 처리하는 데 유용한 다양한 메서드들이 존재하는데, 그 중 map(), filter(), reduce() 메서드는 매우 중요한 역할을 합니다. 각 메서드는 배열을 변환하거나, 조건에 맞는 요소를 추출하거나, 배열을 하나의 값으로 축소하는 등의 작업을 손쉽게 할 수 있게 도와줍니다.이번 글에서는 map(), filter(), reduce() 메서드의 사용법과 예제를 살펴보겠습니다. 1. map() 메서드map() 메서드는 배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과로 새 배열을 생성합니다. 원본 배열을 변경하지 않고, 변환된 새로운 배열을 반환합니다.기본 구문const newArray = array.map((currentVa..

전개 연산자 (Spread Operator)전개 연자는 배열이나 객체의 요소들을 개별 항목으로 분리할 때 사용됩니다. 배열이나 객체를 펼쳐서 값을 복사하거나 결합하는 등의 작업을 간단하게 할 수 있습니다.1. 배열의 요소 펼치기배열에서 Math.max()처럼 인수로 배열을 직접 전달하면 제대로 동작하지 않지만, 전개 연자를 사용하면 배열 요소를 펼쳐서 전달할 수 있습니다.//이하는 전개 연자로 배열요소를 전달하는 방법입니다.const numbers = [20, 2, 9, 22];console.log(Math.max(...numbers)); // 22 //이하는 전개 연자 없이 apply로 배열 요소를 전달하는 방법입니다.const numbers = [20, 2, 9, 22];// apply() 메서드로..

1. 서버로부터 받은 문자열 데이터를 JSON으로 변환서버에서 받은 데이터는 보통 문자열 형식으로 전달됩니다. 이 문자열 데이터를 JSON 형식으로 변환하여 객체처럼 다루어야 할 때가 많습니다.let scores = [];// 서버로부터 받은 문자열 데이터 - 서버로 부터 받아온 데이터는 아래와 같은 형식입니다.const dataFromServer = ` [ { "name": "홍길동", "korean": 80, "math": 90, "english": 90 }, { "name": "고길동", "korean": 90, "math": 80, "english": 80 }, { "name": "신길동", "korean": 70, "math": 80, "english"..