JSX

JSX  - 원래는 return 값에 HTML 들어가면 문법적 오류임    - 하지만 JSX 문법은 적법하다고 해줌!    - JS와 HTML 을 함께 사용하게 해주는 것 뿐만 아니라 동적 렌더링도 가능하게 해줌  실제 코드   - 중괄호 내부에 JS 값을 활용할 수 있음- 숫자, 문자열 모두 사용 가능하고 연산과 삼항 연산자도 사용 가능함   JSX 문법 주의사항 1.  중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다     - 자바스크립트 표현식 : 한 줄의 코드가 특정한 값으로 평가될 수 있는 식    - 중괄호 안에 if문/for문같은 조건문/ 반복문은 에러가 발생함    2. 숫자, 문자열, 배열 값만 렌더링 된다     - 불리언, undefined, null 은 에러가 발생하진 않지만 렌..

JSX 문법1. 부모 요소 하나로 감싸기컴포넌트에 여러 요소가 있다면 반드시 하나의 부모 요소로 감싸야 한다function App() { return ( 부모요소가 없으면 잘 작동하지 않아요 )}export default App;위와 같이 작성하면 아래와 같은 오류가 발생한다  아래와 같이 div 태그 혹은 태그(fragment tag)를 활용하여 감싸줘야 한다.function App() { return ( 부모요소는 반드시 하나! )}export default App; virtual Dom에서 컴포넌트 변화를 효율적으로 감지할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야한다는 규칙이 있기 때문이다. 2. 자바스크립트 표현식 사용하기cons..

코딩애플님의 2022 리액트 강의 2~6강을 참고해서 React로 간단한 홈페이지 만들기를 해보았다! 무료강의가 6강까지만 있어서 완성도 있는 홈페이지는 안나왔지만,React 입문 느낌으로 해보기 좋았다 이 글 이후부터는 "리액트를 다루는 기술" 책을 바탕으로 공부할 계획이다!  JSX 문법기본 셋팅App.js에서 div 하나만 남기고 지우기 JSX 문법class 넣을 땐 className으로 해야함class 선언과 혼동될 수 있기 때문변수 넣을 땐 {중괄호} : 데이터 바인딩태그 사이 뿐만 아니라 태그 안에도 사용 가능(ex)style 넣을 땐 style={{스타일명:'값'}}카멜케이스로 작성(font-size(X), fontSize(O)) 참고error message는 팝업으로 뜨기도 하고, cons..