jsx

React : 에서 자주 쓰는 if문 패턴 5가지 (if, 삼항연산자, &&, switch, object)

1. 컴포넌트 안에서 쓰는 if/else 컴포넌트에서 JSX를 조건부로 보여주고 싶을 때 사용한다. if문은 return()안의 JSX내에서는 사용이 불가능하므로 보통 아래처럼 return+JSX를 뱉는 if문을 작성해 사용한다. function Component() { if ( true ) { return 참일시 노출될 HTML; } else { return null; } } else 생략하는 법 return을 만나면 코드가 종료되므로 이렇게 축약 가능하다. function Component() { if ( true ) { return 참일시 노출될 HTML; } return null; } 2. JSX 안에서 쓰는 삼항연산자(ternary operator) jsx 내(return 내)에서 쓸 수 있다...

React : 탭 만들기 (if else, array로 만들기) + props 귀찮을 때 팁

풀이 function Detail(props){ let [tab, setTab] = useState(0); return ( {setTab(0)}}>버튼0 {setTab(1)}}>버튼1 {setTab(2)}}>버튼2 ) } function TabContent(props){ if (props.tab === 0) { return 내용0 } else if (props.tab === 1) { return 내용1 } else if (props.tab === 2) { return 내용2 } } 더 센스있게 풀기 function TabContent({tab}){ return [내용0, 내용1, 내용2][tab] } 알게 된 점 JSX는 JavaScript의 확장 문법이지만, switch 문은 JavaScript의 제어..

React : JSX문법 3가지 (className, 데이터바인딩, style)

JSX란? JSX는 JavaScript XML의 약어로, React에서 UI를 구성할 때 사용하는 문법이다. JSX는 HTML과 유사한 구문을 사용하며, React 요소를 생성하는 데 사용된다. JSX를 사용하면 JavaScript 코드 안에 마크업을 작성할 수 있다. // jsx const element = Hello, World!; 위와 같은 코드는 `Hello, World!`라는 텍스트를 출력하는 React 요소를 생성한다. JSX는 Babel과 같은 도구를 사용하여 일반 JavaScript 코드로 컴파일된다.이렇게 변환된 코드는 React.createElement() 함수를 호출하는 코드로 변경된다. 따라서 위의 코드는 다음과 같이 변환된다. // javascript const element = ..