[React] props

1. props란? React에서 부모 컴포넌트가 자식 컴포넌트에게 데이터를 넘겨주는 방식이다. React의 Data Flow는 단방향 형식으로 부모에게서 자식으로 이동하기 때문에 거꾸로 올라갈 수 없다. 따라서, props에 있는 데이터들은 수정이 불가능하며 오직 안에 있는 값을 꺼내서 사용할 수만 있다. 2. props 사용 예시 2-1. Hello 컴포넌트에서 name 값 사용하기 🌠 App.js import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; 🌠 Hello.js import React from "react"; function Hello(props) { re..

→2021.09.15

web/react

[React] useEffect

1. useEffect 함수란? React 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 2. useEffect 사용법 🔹 첫 번째 useEffect(() => {}); useEffect의 가장 기본 형태이나, 거의 사용하지는 않는다. Dependency가 없기 때문에, 작은 요소가 하나라도 변화할 때마다 useEffect가 발동되어 불필요한 실행이 많아지기 때문이다. 🔹 두 번째 useEffect(() => {}, []); useEffect에서 설정한 함수가 컴포넌트가 화면에 가장 처음 렌더링 될 때만 실행한다. 🔹 세 번째 useEffect(() => {}, [name]); useEffect를 특정 값이 업데이트 될 때 호출한다. useEffect를 렌더링 후 한번, 그리고..

→2021.09.15

web/react

[React] 리액트 시작하기

🎯 리액트 설치 및 셋팅 명령어 1. Node.js 검색 후 최신버전을 설치한다. 2. Visual Studio Code 에디터를 설치한다. 3. 코드를 작성할 폴더를 생성한 후, 에디터에서 작업폴더를 Open Folder 한다. 4. 터미널에서 npx create-react-app 프로젝트명을 입력해서 리액트 프로젝트를 생성한다. 5. cd 프로젝트명(폴더) 명령어를 통해 프로젝트명의 하위폴더로 이동한다. 6. 코드 작성 후, 터미널에서 npm start를 통해 프로젝트를 실행한다. 🎯 리액트 프로젝트 생성 후 정리 및 확인할 파일 1. public 폴더 > logo.png, manifest.json 삭제 2. src 폴더 > App.js에서 컴포넌트들을 로드 후 사용 🎯 리액트 프로젝트 git rep..

→2021.09.13

web/react

[React] 컴포넌트와 state

1. Component 컴포넌트(Component)란, 리액트의 기본 단위로, UI를 구성하는 개별적인 뷰 단위이다. 여러 컴포넌트를 조합하여 복잡한 화면을 만들 수 있다. 컴포넌트는 JavaScript의 함수 형태로 구현된다. 컴포넌트는 재사용이 가능하다. 컴포넌트 클래스의 이름은 첫 글자를 대문자로 작성한다. (컴포넌트 클래스: 컴포넌트를 찍어내는 공장) 2. State setState(): 컴포넌트의 state 객체에 대한 업데이트를 실행한다. state가 변경되면, 컴포넌트는 리렌더링된다. state는 동적인 데이터를 다루는 방식으로, Hooks중 하나인 useState를 통해 다룰 수 있다. state는 함수의 매개변수처럼 컴포넌트에 전달되는 props와 달리, 함수 내에 선언된 변수처럼 컴포넌..

→2021.09.13

web/html & css

[CSS] 미디어 쿼리, 뷰포트

1. 미디어 쿼리 [ 기본 문법 ] @media [only 또는 not][미디어 유형][and 또는 ,] (조건문){실행문} 👉 and 구문 뒤 공백 필수! [ 적용 방법 ] [ min/max ] 해상도별로 웹사이트를 다양하게 표현 가능 min : 크기가 작은 순서대로 작성 max : 크기가 큰 순서대로 작성 미디어 쿼리로 크기 감지할 때는 뷰포트 기준으로 감지 2. 뷰포트 화면에서 실제 내용이 표시되는 영역 Desktop : 설정한 해상도 Device : 기본으로 설정되어 있는 값 [ 속성 ] width device-width, 양수 뷰포트의 너비 height device-height, 양수 뷰포트의 높이 initial-scale 양수 뷰포트의 초기 배율, 기본값=1 user-scalable yes, ..

→2021.07.22

web/html & css

[CSS] 가변 그리드, 마진, 패딩, 폰트

[ 공식 ] (가변 크기로 만들 박스의 가로 너비 / 가변 크기로 만들 박스를 감싸고 있는 박스의 가로 너비) * 100 = 가변 크기의 % 값 👉 가변 그리드, 마진, 패딩에 동일하게 적용 (단, 패딩은 조건에 따라 다르게 적용) px값 기준으로 계산한다 [ id = "wrap / wrapper" ] 모든 태그를 감싸는 박스 웹 문서 내용 전체의 크기나 배경색 등 한꺼번에 조절 브라우저 화면 크기에 상관없이 웹 문서의 내용 중앙에 배치 반응형 웹에서 자식 박스들이 가변 크기로 설정되었을 때 무제한으로 늘어나는 것 방지 자식 박스들 가변 크기로 만들 때 기준 크기로 사용 가장 상위의 박스 -> 가변 그리드 계산 시 기준이 될 박스 없음 [ 가변 패딩 적용 방법 ] 방법 1. 기본 방법 (가변 패딩을 적용..

→2021.07.22

web/html & css

[CSS] 반응형 미디어 쿼리

/* Large desktop */ @media (min-width: 1500px) { ... } /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { ... } /* Landscape phone to portrait tablet */ @media (max-width: 767px) { ... } /* Landscape phones and down */ @media (max-width: 480px) { ... }

→2021.07.13

web/html & css

[CSS] em, rem 그리고 css의 단위들

.selector { property: value; } Absolute length units : px Relative length units : em, rem, vw, vh, % 1. em - typography에서 현재 지정된 point size 나타내는 단위 / 현재 폰트 size 나타냄 - 선택된 폰트에 상관없이 항상 고정된 폰트 사이즈 가진다 - 부모의 폰트사이즈에 상대적으로 크기가 계산된다 - 브라우저의 기본 폰트 : 16px - ex) 8em = 16 * 8 = 128px = 800% 2. rem - root em - root에 지정된 폰트사이즈에 따라 크기 결정 3. vw, vh, wmin, wmax - 부모 요소와는 상관 없다, 브라우저의 크기에 의존 - 100vw : viewport 너..

→2021.07.09

티스토리툴바