리액트에서 요소의 Attirbute 는 카멜 표기법을 준수해야 합니다. JSX는 자바스크립트 언어이므로 대소문자를 구별하기 때문에 케밥 표기법 대신 카멜 표기법을 이용하여 className 속성으로 클래스명을 지정하는 것입니다. React에서 작성하는 태그들은 HTML처럼 보일 뿐 사실 JSX는 자바스크립트 코드라는 점을 알아야합니다.
React/basic
😫 어려운 리액트. 막 때려넣으면 언젠간 깨닫는 날이 오겠지 목표 리스트와 key값, 그리고 map 함수를 이용한 반복문 사용해보기. 저는 실용성 있는 To do List를 만드는 것이 목표입니다. html로 리스트만 출력하는것은 굉장히 간단하지만, 나중에 할일을 추가, 수정, 삭제할 수 있는 기능을 만드는건 굉장히 어렵습니다. input 값을 받아 목록에 배열을 추가해야하는데, 이 때 필요한 기능이 key 입니다. 원래 저는 값을 구하기 위해 JavaScript 를 이용할 때 index 값을 사용했으나, 개발자 말로는 '성능이 저하되고 state에 영향을 줄 수 있기 때문에 리액트에서는 권장하지 않는다'고 합니다. https://robinpokorny.medium.com/index-as-a-key-is..
목표 앞서 배운 props 를 응용하여 조건문을 만들어보자. 조건문 작성하기 저는 props 값이 true 일 때 '성공' 단어를, false 일 때 '실패' 단어가 나오도록 조건을 설정해보려 합니다. //Prt2.js import React from 'react'; function Fix1 (props){ return 성공 } function Fix2 (props){ return 실패 } function Prt2 (props){ const Success = props.Success; if (Success) { return } return }; export default Prt2; Prt2.js 를 모두 작성하였습니다. 이제 Success 의 true, false 여부를 받아와야 이 함수가 완성이 됩니다..
목표 props의 개념을 정확하게 이해하고 컴포넌트에서 각각의 개체로 활용해보겠습니다. 새로운 컴포넌트 작성 새로운 컴포넌트를 작성하고, 최상위 컴포넌트 에서 props값을 전달할 예정입니다. 먼저 App.js에서 props를 받을 새로운 컴포넌트를 만들어주었습니다. //Prt1.js import React from 'react'; function Prt1 (props) { return( {props.name}, Welcome! ) } export default Prt1; ※ React는 소문자로 시작하는 컴포넌트를 DOM태그로 처리하기 때문에, 컴포넌트의 이름은 항상 대문자로 시작해야 합니다. Prt1.js 라는 파일을 만들고 return 값에 {이름}, Welcome! 이 출력되도록 설정하였습니다. ..
