DDOstory

map 함수를 사용해서 리스트를 렌더링 했는데 각 엘리먼트에 키가 빠져 오류가 나는 상황화면에 각 학생 객체의 고유한 값을 가진 아이디를 추가map 함수의 엘리먼트에 아이디를 값으로 해서 키를 넣어줌key를 포맷팅 된 문자열을 key로 사용할 수도 있고 인덱스를 키로 사용할 수도 있음AttendanceBook 컴포넌트는 student라는 배열로부터 학생 정보가 담긴 객체를 받아 학생들의 이름을 목록 형태로 출력하는 컴포넌트배열을 렌더링 하기 위해 map() 함수 사용 🎖️ List같은 아이템을 순서대로 모아놓은 것이 리스트에 해당리스트를 위해 사용하는 자료구조는 배열 (Array)배열은 JavaScript의 변수나 객체를 하나의 변수로 묶어 놓은 것을 의미const numbers = [1, 2, 3, ..

👨‍🎓 JSXReact를 사용하여 개발할 때 거의 필수적으로 사용A syntax extension to javaScript자바스크립트의 확장 문법JavaScript + XML/HTML을 결합한 것const element = Hello, world!;👨‍🎓 JSX 역할XML/HTML 코드를 JavaScript로 변환하는 과정을 거침// JSX를 사용한 코드class Hello extends React.Component{ render(){ return Hello {this.props.toWhat}; }}ReactDom.render( document.getElementById('root'));// JSX를 사용하지 않은 코드class Hello extends React.compone..

📱  DOM (Document Object Model)html이나 xml 같은 문서에 요소들을 계층적으로 표현해서 생성하고 수정하고 삭제하는 등어떤 조작이 가능하게끔 해주는 하나의 인터페이스를 의미모든 html의 요소들은 html 도움을 통해 우리가 접근할 수가 있고 조작할 수 있게 됨DOM을 배우는 이유는 html 문서에 있는 어떤 요소를 조작하거나 새로운 요소를 만들어서 html 문서에 추가하거나 기존의 요소를 삭제하는 것을 하기 위함요소 선택과 변경, 생성이라는 크게 3가지 분류로 나눠서 이야기요소를 조작하려면 우선 어떤 요소를 조작할 지 요소를 선택하는 과정 필요html 문서에 있는 요소들 중에 내가 원하는 특정 요소를 선택하기 위해서는 html 문서 객체인 Document 객체에서 제공하는 메..