React21 styled-component 이번에 개인 프로젝트를 진행하면서 styled-component 를 제대로 써보게 되었다. 설치 npm install styled-component npm 또는 yarn으로 설치 가능한데 나는 npm 으로 설치하였다. 설치하면 package.json 에 버전 등의 정보가 추가된다. 문법 기본적인 문법은 다음과 같다. styled-components 를 import 하고 아래에 ``(템플릿 리터럴)을 사용하여 스타일을 작성한다. //기본 문법 export const 컴포넌트명 = styled.태그명` //css 작성 ` [예시] import styled from "styled-components"; export const FormContainer = styled.form` margin: 20px auto;.. 2024. 1. 30. react hook useEffect 와 의존성 배열 useEffect react 가 렌더링 될 때마다 실행된다는 특징이 있다. 처음 렌더링 될 때(마운트) 특정 값이 변경될 때(업데이트) 삭제될 때 (언마운트) 또한, 어떤 props/state가 변경될 때 실행할지를 정할 수 있는데, 이때 의존성 배열을 사용한다. 의존성 배열 useEffect를 실행할 값을 지정하는 배열이다. 1. 의존성 배열을 선언하지 않은 경우 아래의 코드는 어떤 state 값이 변경되는지 상관없이 useEffect 가 실행된다. const [num, setNum] = useState(0); const [color, setColor] = useState(''); useEffect(() => { console.log('실행'); }); 2. 의존성 배열을 빈 값으로 지정했을 경우 처음.. 2024. 1. 24. 불변성의 개념과 불변성이 중요한 이유 중요 키워드 불변성 원시타입 참조타입 불변성이 중요한 이유 리액트에서 불변성이라는 개념은 굉장히 중요하다. 렌더링과 밀접한 관계가 있기 때문이다. 리액트는 어떠한 state 가 있을 때 이 값이 변경됐는지 아니면 이전과 같은지에 따라서 렌더링을 할지 말지를 결정한다. 이때, 변경됐는지 판단하는 값은 주소값을 의미한다. (얕은 비교 수행) 그렇기 때문에 불변성을 지키는 것이 중요하다고 할 수 있다. 불변성이란? 데이터 변경 시 기존에 생성된 원본 데이터를 변경시키지 않고, 새로운 원본을 만드는 것을 말한다. 데이터 타입에서 원시타입과 참조타입이 있을 때, 원시타입은 불변성 지키고, 참조타입은 불변성을 지키지 않는다고 할 수 있다. 원시타입과 참조타입 원시타입 : Boolean, String, Number,.. 2024. 1. 24. props props란? 부모 컴포넌트에서 자식 컴포넌트의 방향으로만 값을 전달할 수 있다. 자식 컴포넌트는 받은 props를 변경할 수 없다. Object의 형태로 값이 전달된다. props를 설정하는 방법 1. 부모 컴포넌트에서 자식 컴포넌트로 props를 설정하는 방법 import React from 'react'; function Son(props){ console.log(props); return 나는 {props.grandName} {props.name}의 자식 컴포넌트에오 } function Parent(props){ console.log(props) const name = '흥흥'; const grandName = props.grandName; return } function Grand(){ cons.. 2024. 1. 22. react 설치 및 기초 react 설치 처음 설치 할 때는 아래 명령어를 사용하여 설치한다. npx create-react-app 프로젝트명 설치 후 해당 경로에서 npm start를 하면 위 이미지와 같이 실행된다. app.js에서 수정 후 저장하면 바로 적용이 된다. react에서 css 사용하기 1. 인라인 스타일 css 인라인 스타일의 css를 사용하기 위해서는 객체 형태로 사용해야 한다. 안녕 또한 대시 - 대신 카멜 케이스로 작성해야 한다. 하지만, 인라인 스타일 css는 많이 사용되지 않는다고 한다. 2. 전역 css 전체에 적용되는 css로 사용하는 방법이 있는데, 이 방법은 클래스명이 같을 경우 스타일이 덮어 쓰인다. (기존에 사용하던 방식이라고 생각하면 된다.) css 스타일이 head 태그 안에 style .. 2024. 1. 21. 이전 1 2 3 다음
