Learn new Get simpler Do more

Ternary operator 우리말로 하면 삼항 연산자라고 불리고 말 그대로 세개의 피연산자를 대상으로 합니다.간단하게 if ... else 문을 살펴보겠습니다.const name = 'Bob';if (name == 'Bob') { console.log('Hello, Bob');} else { console.log('Hello, Friend');};위 코드는 다음과 같이 작동합니다먼저 이름 변수를 선언하고 "Bob" 문자열로 설정합니다. 다음으로 if 문을 사용하여 이름 변수의 값이 "Bob"인지 확인합니다. 만약 그렇다면 console.log에서 "Bob"이라는 단어를 출력합니다.그렇지 않으면 이름 변수의 값이 "Bob"이 아닌 경우 다른 블록은 콘솔에서 "Hello, Fr..

화살표 함수(Arrow Funcions) Arrow 함수는 함수를 작성할때 좀 더 간결하게 해줄수 있는 함수입니다. 기본 바로 예제를 통해 확인해 보겠습니다. // Before hello = function() { return "Hello World!"; } // With Arrow Function hello = () => { return "Hello World!"; } 간결해 졌습니다. 함수에 지정문이 하나만 있고 바로 그 값을 반환 한다면 아래와 같이 더 간결하게 만들수 있습니다. // Arrow Funtions Return Value by Default // Note: This works only if the function has only one statement. hello = () => "He..

Build a shopping cart that displays the total price when adding items. Implement the Add to Cart logic, add an item to the cart when the button is clicked. Implement the + and - buttons to add or remove items from the cart. Implement the total sum at the bottom of the page. ShoppingCart.js import { useState } from 'react' const items = [{ name: 'apple', price: 0.79 }, { name: 'banana', price: 0...

Focus an input upon a component mounting. useRef: Within React, we normally interact with the virtual DOM. Sometimes we need to interact with the actual DOM, however, and to do so you can use refs. Uppm page load, focus the input. FocusInput.js import { useEffect, useRef } from 'react' export default function FocusInput() { const focusedInput = useRef(null) useEffect(() => { focusedInput.current..

Build a simple calculator. useReducer: Sometimes state becomes complicated in React, and there are multiple mutations you will need to implement on your data. useReducer helps simplify this by moving state management outside of the component. Implement the logic so that two numbers can be selected. Implement the logic to add these two selected numbers together. Same for subtraction Implement a c..

Build a pixel art drawing app. React Context: Allows you to share data between components more easily. Instead of having to pass a prop down multiple levels, you can use Context. When a color is clicked, that color becomes the drawing color, Then, when one of the grid squares is clicked, it should be colored in with the drawing color. Use React Context to share the state between your components...

Create a color-picking app so the user can select the page's background color. Upon clicking a color, change the whole page's background to that color. Make sure to use the Color subcomponent. ColorPicker.js import { useState } from 'react' import Color from './Color' const colors = [{ hex: '#91A6FF', name: 'Cornflower Blue' }, { hex: '#FF88DC', name: 'Persian Pink' }, { hex: '#80FF72', name: 'S..

Add and remove effects within React. The button that toggles mounting of a child component, WindowEvent. When the WindowEvent component is active, add an event listener to the window that triggers an alert if the user double-clicks on the page. Make sure to remove the window event when the component is toggled off. WindowEvent.js import { useEffect } from "react" export default function WindowEv..

localStorage: localStorage allows you to store data in the browser. localStorage.getItem(key) // retrieve an item localStorage.setItem(key, value) // set data in localStorage Display a score that can be increased or decreased. Use localStorage to store the score so that it persists when you come back to the page. You should be able to refresh the page and still see the score from the previous re..

Use a dog picture API to display dog images on React. // Using API: https://dog.ceo/dog-api/ Link to an API in a comment which you will use to fetch a random dog picture. DogPIcs.js import { useEffect, useState } from "react" const getDogPic = async () => { const response = await fetch('https://dog.ceo/api/breeds/image/random') const dog = await response.json() return dog.message } export defaul..