본문 바로가기

코딩 정보58

[React] css에 대해 알아보자 [바닐라 css] 목차 React에서는 css 스타일링의 방법이 여러가지가 있다그 중에서 바닐라 css 여러 사용방법과 장단점에 대해 알아보자 바닐라 css우리가 잘아는 바닐라 css로 아래와 같이 사용한다.import "./Lecture3.css";//이런식으로 불러서 사용import Lecture2 from "./Lecture2";function Lecture3() { return ( hello world );}export default Lecture3; 문제점css규칙들은 컴포넌트에 속하지 않기 때문에 스코핑이 되지 않는다이해하기 어렵다면 아래 코드를 보면 된다.function Lecture2() { return ( hello world2 );}expo.. 2024. 6. 29.
[React] 틱택토 게임을 통해 개념 다지기 목차 간단한 틱택토 게임 모습  코드 참고https://github.com/sins051301/TIC_TAC_TO_GAME/tree/sucess/src TIC_TAC_TO_GAME/src at sucess · sins051301/TIC_TAC_TO_GAMEContribute to sins051301/TIC_TAC_TO_GAME development by creating an account on GitHub.github.com코드는 틱택토게임 폴더를 확인하면 된다.  알아두면 좋을것 같은 부분을 설명하고자 한다. 스프레드 연산자를 활용한 접근function deriveGameBoard(gameTurns) { //스프레드 연산자를 통해 이중 배열을 복사하는 방식 //기존 배열을 복사해준 뒤 일부만 변.. 2024. 6. 28.
[React] 효율적인 코드 작성을 위한 개념 목차 Fragment자바스크립트는 한 값만 반환이 가능하기 때문에 return할때 묶어주어야 한다.그렇게 되면 묶기위해 불필요한 div를 써야하는데 그 대신 react의 fragment를 사용할 수 있다. import { Fragment } from "react";import ButtonList from "./ButtonList";function Lecture2() { return ( hello world dkdk );}export default Lecture2; 아래 코드를 쓰면 fragment 조차 사용하지 않아도 된다.import ButtonList from "./ButtonList";function Lecture2() { return ( hel.. 2024. 6. 26.
[React] 주요 개념 알아보기 목차   index.js 리액트 앱의 진입점   커스텀 컴포넌트 규칙컴포넌트 이름은 대문자로 시작해야 한다.->다른 개발자가 만든 커스텀 컴포넌트와 리액트 내장된 컴포넌트를 구분을 하기 위해서이다.  동적인 값 출력하기import React from "react";const greetArray = ["hello", "hi", "okay"];function getRandomInt(num) { let newNumber= Math.floor(Math.random() * num) ; return newNumber;}//이런식으로 중괄호에 넣어주면 된다.function Lecture1() { return {greetArray[getRandomInt(3)]};}export default Lecture1; 동적.. 2024. 6. 21.
728x90

티스토리툴바