천천히 알아가는 세상

안녕하세요. 이번에는 React의 조건부 렌더링 사용하는 방법에 대하여 알아보겠습니다. React는 상황에 따라서 원하는 내용을 출력할 수 있습니다. 이때 삼항 연산자, useState 등을 많이 사용합니다. 실습환경 CRA - create-react-app 아래와 같이 파일을 작성합니다. /components/Item.jsx import React from 'react' export default function Item() { return ( 보이나요? ) } /components/ConditionalRender.jsx import React from 'react' import { useState } from 'react' import Item from './Item'; export default f..

안녕하세요. 이번에는 React에서 삼항 연산자를 이용하는 방법에 대하여 알아보겠습니다. 1. 삼항 연산자 삼항 연산자를 이용하여 React 코드 작성하기 App.js import './App.css'; import Condition from './components/Condition'; function App() { return ( ); } export default App; components/Condition.js import { useState } from 'react'; export default function Condition() { const [condition, setCondition] = useState(true); return ( setCondition(!condition)}>컨디션 ..

안녕하세요. 이번에는 JavaScript 조건문에 대하여 알아보겠습니다. 조건문 특정 조건 만족 시 ( 조건이 참인 경우 ) 실행하는 명령의 집합이며, 특정한 조건 속에서 작업을 수행하고 싶을 때 사용한다. 대표적으로 사용하는 방식에는 if 문과 switch문을 사용하는 2가지 방법이 있습니다. 1. if 문 기본 작성법은 아래 방법처럼 작성을 하면 되며 방법은 3가지 유형으로 나뉠 수 있습니다. if ( 조건 ) { 실행 내용 } ----------------------- if ( 조건 ) { 실행 내용 } else { 실행 내용 } ----------------------- if ( 조건 ) { 실행 내용 } else if ( 조건 ) { 실행 내용 } else if ( 조건 ) { 실행 내용 } e..