React 썸네일형 리스트형 JSX 기초 JSX란 무엇인가?JSX는 JavaScript에서 XML과 유사한 구문을 사용하여 React 컴포넌트를 작성하는 방식입니다. JSX는 JavaScript와 HTML의 장점을 결합하여 UI를 보다 직관적으로 구성할 수 있게 해줍니다. React는 이를 JavaScript로 변환하여 렌더링합니다.1. JSXElementJSXElement는 HTML 태그와 비슷한 구조를 가지며, React 컴포넌트에서 화면 요소를 표현하는 데 사용됩니다. 커스텀 컴포넌트를 정의할 때는 이름이 대문자로 시작해야 인식됩니다.JSXOpeningElement: 컴포넌트의 시작 태그 JSXClosingElement: 컴포넌트의 종료 태그 JSXSelfClosingElement: 내용 없이 닫히는 태그 JSXFragment: 여러 컴포.. 더보기 리액트에서 프로토타입이란? 1. 프로토타입이란?“프로토타입은 자바스크립트에서 객체가 다른 객체로부터 속성과 메서드를 상속받는 방식을 설명하는 개념”모든 자바스크립트 객체는 다른 객체로부터 상속을 받으며, 이 상속을 관리하는 시스템이 바로 "프로토타입 체인"입니다.프로토타입 체인: 객체가 프로퍼티를 찾을 때 자신의 속성에서 먼저 찾고, 없으면 프로토타입 체인을 따라 상위 객체에서 찾습니다.Object.prototype: 모든 객체의 최상위 프로토타입은 Object.prototype입니다. 이 객체의 프로퍼티나 메서드는 자바스크립트의 거의 모든 객체에서 사용할 수 있습니다.2. 프로토타입의 역할과 특징상속을 통한 코드 재사용: 자바스크립트에서 클래스 기반 상속 대신 프로토타입을 사용하여 객체지향 프로그래밍을 구현합니다. 이를 통해 객.. 더보기 JSX란? JSX란 무엇인가?JSX(JavaScript XML)는 React에서 UI를 설계하기 위해 사용되는 JavaScript의 확장 문법입니다.JSX는 HTML과 비슷한 구문을 JavaScript 코드 안에 직접 작성할 수 있게 해주며,이를 통해 개발자는 사용자 인터페이스(UI)를 더욱 직관적이고 명확하게 표현할 수 있습니다. JSX는 JavaScript의 일부분으로, JavaScript와 XML의 장점을 결합하여 코드의 가독성과 유지보수성을 높입니다. JSX는 브라우저가 이해할 수 없는 문법이기 때문에, Babel과 같은 트랜스파일러를 사용하여 JavaScript 코드로 변환됩니다. JSX는 브라우저가 이해할 수 없는 문법이기 때문에, Babel과 같은 트랜스파일러를 사용하여 JavaScript 코드로 변.. 더보기 Array 프로토타입의 메소드 리액트에서 자주 사용되는 Array.prototype의 메서드들은 주로 상태 관리나 렌더링에 영향을 주는 배열 조작과 관련된 메서드들입니다. map()설명: 배열의 각 요소에 대해 함수를 실행하여, 그 결과를 새로운 배열로 반환합니다. 리액트에서는 리스트를 렌더링할 때 매우 자주 사용됩니다.const items = ['Apple', 'Banana', 'Cherry'];const itemList = items.map((item, index) => {item});// 리액트 컴포넌트에서 렌더링return {itemList};리액트 활용: map()을 사용해 컴포넌트 리스트를 생성하여 렌더링할 수 있습니다. key 속성을 사용해 각 요소의 고유성을 지정하는 것도 중요합니다. filter()설명: 배열의 각 .. 더보기 전개 구문 1. 전개 구문(Spread Syntax)란?전개 구문은 배열, 객체, 함수의 매개변수 등 다양한 곳에서 요소들을 펼쳐서 사용할 수 있게 해줍니다. ...를 사용하여 배열이나 객체를 개별 요소나 속성으로 분해하거나 다른 배열이나 객체에 합칠 수 있습니다. 2. 전개 구문의 주요 사용 사례1. 배열에서의 전개 구문배열 복사전개 구문을 사용하면 배열을 간편하게 복사할 수 있습니다. 기존 배열을 수정하지 않고 새로운 배열을 생성할 수 있어 불변성을 유지하는 데 도움이 됩니다. const arr1 = [1, 2, 3];const arr2 = [...arr1];console.log(arr2); // [1, 2, 3]여기서 ...arr1은 arr1 배열의 모든 요소를 개별적으로 펼쳐서 arr2에 복사합니다. arr.. 더보기 구조 분해 할당 구조 분해 할당이란?구조 분해 할당은 배열이나 객체 내부의 값을 꺼내어 각각의 변수에 쉽게 할당할 수 있는 방법입니다.이를 통해 긴 코드를 줄이고, 필요한 값만 쉽게 추출하여 사용할 수 있습니다. const fruits = ['apple', 'banana', 'cherry'];const [first, second, third] = fruits;console.log(first); // 'apple'console.log(second); // 'banana'console.log(third); // 'cherry' 위 코드에서는 fruits 배열의 첫 번째 값이 first, 두 번째 값이 second, 세 번째 값이 third 변수에 할당됩니다.배열의 요소가 순서대로 할당되기 때문에, 변수의 순서를 잘 맞춰.. 더보기 리액트를 왜 쓰는가? 리액트의 단방향 데이터 바인딩 이해하기1. 데이터 바인딩이란?데이터 바인딩은 View(화면에 보여지는 데이터)와 Model(브라우저 메모리에 있는 데이터)을 묶어, 한쪽의 값이 변하면 다른 한쪽도 변하게 만드는 방식입니다. 이를 통해 개발자가 일일이 DOM을 수정할 필요 없이, 변경 사항이 바로 적용됩니다.2. 데이터 바인딩의 종류단방향 데이터 바인딩 (One-Way Data Binding): 데이터가 한 방향으로만 흐르며, 주로 부모에서 자식 컴포넌트로 전달됩니다. 리액트가 대표적입니다.양방향 데이터 바인딩 (Two-Way Data Binding): 데이터가 양방향으로 흐르며, 변경된 값이 즉시 반영됩니다. Angular가 대표적입니다.3. 리액트의 단방향 데이터 바인딩리액트는 단방향 데이터 바인딩을 .. 더보기 [React] 팀원 구성 박스 구현 기능 요약 1. 입력 내용을 State의 배열 형태로 저장 2. 포지션 추가 시 팀원 구성 박스 생성 3. 해당 포지션 클릭 시 이름과 역할 추가 생성 3-1. 이름과 역할이 작성되지 않았다면 생성되지 않음 4. 생성된 박스과 이름,역할을 삭제 1. State 배열 형태로 저장 const [teamInfoBoxes, setTeamInfoBoxes] = useState([ { id: 1, addInfo: false, infoData: [{ id: 1, name: '', position: '', role: '' }] }, ]); 팀원 박스와 이름 역활 데이터를 각각 저장하는 2차원 배열 형태로 저장 id : 팀원 박스 addInfo : 팀원 박스를 추가하는 트리거 infoData : 팀원 박스 내 입력한 정.. 더보기 이전 1 2 3 4 다음
