useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않습니다. 리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회 할 수 있는 반면, useRef 로 관리하고 있는 변수는 설정 후 바로 조회 할 수 있습니다.
useRef함수는current속성을 가지고 있는 객체를 반환하는데, 인자로 넘어온 초기값을current속성에 할당합니다. 이current속성은 값을 변경해도 상태를 변경할 때 처럼 React 컴포넌트가 다시 랜더링되지 않습니다. React 컴포넌트가 다시 랜더링될 때도 마찬가지로 이current속성의 값이 유실되지 않습니다.
useRef훅 함수가 반환하는 객체의 이러한 독특한 성질을 이용하여startCounter()와stopCounter()함수를 구현해보았습니다.
BrowserRouter- history API를 사용해 URL과 UI를 동기화하는 라우터입니다.
Route- 컴포넌트의 속성에 설정된 URL과 현재 경로가 일치하면 해당하는 컴포넌트, 함수를 렌더링한다.
Link- 'a'태그와 비슷합니다. to속성에 설정된 링크로 이동합니다. 기록이 history스택에 저장됩니다.
Switch- 자식 컴포넌트 Route또는 Redirect중 매치되는 첫 번째 요소를 렌더링합니다. Switch를 사용하면 BrowserRouter만 사용할 때와 다르게하나의 매칭되는 요소만 렌더링한다는 점을 보장해줍니다. 사용하지 않을 경우 매칭되는 모두를 렌더링합니다.
content-box는 기본 CSS 박스 크기 결정법을 사용합니다. 요소의 너비를 100 픽셀로 설정하면 콘텐츠 영역이 100 픽셀 너비를 가지고, 테두리와 안쪽 여백은 이에 더해집니다.
border-box는 테두리와 안쪽 여백의 크기도 요소의 크기로 고려합니다. 너비를 100 픽셀로 설정하고 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100 픽셀을 유지합니다. 대부분의 경우 이 편이 크기를 조절할 때 쉽습니다.
content-boxCSS 표준이 정의한 초기 기본값.width와height속성이 콘텐츠 영역만 포함하고 안팎 여백과 테두리는 포함하지 않습니다. 즉.box {width: 350px; border: 10px solid black;}을 적용한 요소의 너비는370px입니다.요소의 크기는 너비 = 콘텐츠 너비, 높이 = 콘텐츠 높이로 계산하고 테두리와 안쪽 여백은 식에 넣지 않습니다.border-boxwidth와height속성이 안쪽 여백과 테두리는 포함하고, 바깥 여백은 포함하지 않습니다. 안쪽 여백과 테두리가 요소 상자 안에 위치함을 유의하세요. 즉.box {width: 350px; border: 10px solid black;}을 적용한 요소의 너비는350px입니다. 콘텐츠 영역의 크기는 음수일 수 없으므로border-box를 사용해 요소를 사라지게 할 수는 없습니다.요소의 크기는 너비 = 테두리 + 안쪽 여백 + 콘텐츠 너비, 높이 = 테두리 + 안쪽 여백 + 콘텐츠 높이로 계산합니다.
-(마이너스)값은 왼쪽에 그림자를 지정한다. ㆍy-offset: 아래쪽에 정해진 수치만크의 크기로 그림자를 지정한다.
-(마이너스)값은 위쪽에 그림자를 지정한다. ㆍblur : 정해진 수치만큼 그림자가 흐려지는 정도. t생략가능, default, 숫자가 클수록 흐려짐 ㆍcolor : 그림자의 색상 지정. #FEFEFE 또는 rgba(0, 0, 0, 1) 방식 모두 사용 가능 ㆍrgba의 a값은 불투명도를 의미. 숫자 1은 원색 . 0.5 혹은 .5는 50%를 뜻한다.
Hook이란?Hook은 특별한 함수입니다. 예를 들어useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해줍니다. 다른 Hook들은 나중에 살펴봅시다!
언제 Hook을 사용할까?함수 컴포넌트를 사용하던 중 state를 추가하고 싶을 때 클래스 컴포넌트로 바꾸곤 했을 겁니다. 하지만 이제 함수 컴포넌트 안에서 Hook을 이용하여 state를 사용할 수 있습니다.
state 변수 선언하기
클래스를 사용할 때, constructor 안에서this.state를{ count: 0 }로 설정함으로써count를0으로 초기화했습니다.
함수 컴포넌트는this를 가질 수 없기 때문에this.state를 할당하거나 읽을 수 없습니다. 대신,useStateHook을 직접 컴포넌트에 호출합니다.
useState를 호출하는 것은 무엇을 하는 걸까요?“state 변수”를 선언할 수 있습니다. 위에 선언한 변수는count라고 부르지만banana처럼 아무 이름으로 지어도 됩니다.useState는 클래스 컴포넌트의this.state가 제공하는 기능과 똑같습니다. 일반적으로 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 사라지지 않습니다.
useState의 인자로 무엇을 넘겨주어야 할까요?useState()Hook의 인자로 넘겨주는 값은 state의 초기 값. 함수 컴포넌트의 state는 클래스와 달리 객체일 필요는 없고, 숫자 타입과 문자 타입을 가질 수 있습니다. 위의 예시는 사용자가 버튼을 얼마나 많이 클릭했는지 알기를 원하므로0을 해당 state의 초기 값으로 선언했습니다. (2개의 다른 변수를 저장하기를 원한다면useState()를 두 번 호출해야 합니다.)
useState는 무엇을 반환할까요?state 변수, 해당 변수를 갱신할 수 있는 함수 이 두 가지 쌍을 반환합니다. 이것이 바로const [count, setCount] = useState()라고 쓰는 이유입니다. 클래스 컴포넌트의this.state.count와this.setState와 유사합니다.
이제useState를 이용하여 많은 것을 만들 수 있습니다.
count라고 부르는 state 변수를 선언하고0으로 초기화합니다. React는 해당 변수를 리렌더링할 때 기억하고, 가장 최근에 갱신된 값을 제공합니다.count변수의 값을 갱신하려면setCount를 호출하면 됩니다.
import React, { useState } from "react";
//여기서 useState가 Hook
//https://ko.reactjs.org/docs/hooks-overview.html
//버튼클릭시 값 증가
function Example() {
//'count'라는 새 상태 변수를 선언
//0은 초기값
const [count, setCount] = useState(0);
//하나의 컴포넌트 내에서 State Hook을 여러 개 사용할 수 있음
const [age, setAge] = useState(10);
const [fruit, setFruit] = useState("banana");
// const [toDos, setToDos] = useState([{ text: "Learn Hooks" }]); //여기
return (
<div>
<p>You clicked {count}times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
<h3>나이{age}살부터 사용가능</h3>
<button onClick={() => setAge(age * 2)}>Click me</button>
<h3>우리가 먹을 과일은:{fruit}</h3>
<button onClick={() => setFruit(fruit + "apple")}>과일추가</button>
{/* <h3>뭔데 넌{toDos}</h3>
<button onClick={() => setToDos(toDos + "add")}>텍스트추가요</button> 여기추가하면 왜안되지*/}
</div>
);
}
export default Example;
왜 저 todos는 안될까 에러떠
혹시 카멜표기 때문인가 싶어서 대문자 넣어봤는데 아니더라고
✌️ Hook 사용 규칙
Hook은 그냥 JavaScript 함수이지만, 두 가지 규칙을 준수해야 합니다.
최상위(at the top level)에서만 Hook을 호출해야 합니다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 마세요.
React 함수 컴포넌트내에서만 Hook을 호출해야 합니다. 일반 JavaScript 함수에서는 Hook을 호출해서는 안 됩니다. (Hook을 호출할 수 있는 곳이 딱 한 군데 더 있습니다. 바로 직접 작성한 custom Hook 내입니다. 이것에 대해서는 나중에 알아보겠습니다~~~)
요소가 여러 개 나열되어 있는 경우에는 굳이 class나 id를 쓰지 않고 스타일을 지정(몇 번째인지 구분해서)할 수 있다.
only-child : 부모 안에 자식요소가 하나만 존재할때 자식 요소를 선택 first-child : 부모안에 있는 요소중에서 첫번째 자식을 선택 last-child : 부모안에 있는 요소중에서 마지막 자식.. nth-child(n) : 부모안에 있는 모든 요소 중에서 n번째 자식을 선택 nth-last-child(n) : 부모안에 있는 모든 요소 중에서 끝에서 n번째 자식을 선택
A:only-target-of : 부모안에 A요소가 하나만 있을때 A:first-of-type : 부모안에 있는 A요소 중에서 첫번째 요소 선택 A:last-of-type : 부모안에 있는 A요소 중에서 마지막 요소 선택 A:nth-of-type(n) : 부모안에 있는 A요소 중에서 n 번째 요소 선택 A:nth-last-of-type(n) : 부모안에 있는 A요소 중에서 끝에서 n 번째 요소 선택
가상클래스 선택자 :link 방문하지 않는 링크에 스타일 적용 :visited 웹문서의 링크중에서 한번 이상 방문한 링크에 스타일 적용 :hover 마우스 포인터를 올려놓을 때 스타일 적용 :active 웹요소의 링크나 이미지등을 활성화 했을 때, 클릭햇을 때 스타일을 지정 :focus 웹 요소의 초점이 맞추어져있을 때 스타일 적용
display : block ->인라인 레벨 요소를 블록레벨 요소로 만든다. display : inline ->블록레벨 레벨 요소를 인라인 요소로 만든다. display : inline-block ->인라인과 블록의 속성을 모두 가지고 있고 마진과 패딩을 지정할수 있다. display : none ->해당 요소를 화면에 표시 하지 않는다.
내비게이션 구성할 때 <nav>라는 태그를 사용합니다
인라인 블록 걸어서가로로
p태그 넣고 이미지 나란히 하고 싶은데
p태그는 블록레벨이라 이미지와 나란히 한줄못써
그럴때는 플롯이라는 속성이용하면돼
거기서 이미지 표시하고 주변에 택스트 감싸게
float : left ->해당 요소를 문서의 왼쪽에 배치 right->해당 요소를 문서의 오른쪽에 배치 none->좌우 어느쪽에도 배치하지 않는다 default
플롯은 웹요소를 붕떠있게하는 거 그게 왼쪽구석이냐 오른쪽구석이냐 플롯 레프트 롸이트 아무것도 아닌 none
이렇게 3개있음
이렇게 왼쪽 배치하면
그다음에 넣는 애들도 똑 같은 속성값 반영되어버림
내가 플롯요소를 하나에만 넣고 싶은데 밑에 해제안하면
밑에도 전달됨
그래서 플롯 속성더이상 유효하지 않다는 속성 넣어줘야함
클리어!!
clear left -> float left 해제 right-> rigt해제 both->둘다해제
왼쪽부터 차례대로 정렬됨배치됨
근데 3은 플롯 지정안해서
웹브라우저 기본 흐름대로 배치된거.
클리어주면!!
클리어 주면 이렇게~
플롯레프트랑 인라인블록이랑 뭔차이냐~
눈으로는 동일. 똑같이 가로 배치
근데인라인블록은 차이가 있어.
결과화면은 같은데
인라인 블록으로 세팅하면 가로로 배치를 하긴하지만
마진이랑 패딩값을 기본으로 갖고 있고
플롯으로 배치하면 가로배치될 때 마진이랑 패딩값이 없어
플롯으로 요소 배치할 때 만약 마진이랑 패딩필요해 그러면 지정 별도로 해야되고
클리어 속성으로 플롯레프트 해제해야한다.!!
플롯이랑 클리어 속성 잘 쓰면 레이어만들 때 잘 활용할 수 있다
미리 레이아웃 그림으로 그려놓고 세팅하는게 제일 좋다! 헤더는 주로 웹페이지 상반부
본문은 메인컨텐츠
레이아웃짤 때 미리 구성해~
제목 위에 들어가기
카테고리 나타낼거 사이드바.
본문 메인 컨텐츠영열
Footer 맨 밑에 들어갈거
이런식으로웹브라우저 기본값 리셋하는 거임
컨테이너 내용전체 너비
내가 따라 하면서 안됐던게
처음에 정한 전체 너비보다
사이드바, 본문의 두 너비 합한 게 커서 그랬음(그래서 플롯써도 옆에와서 안붙고 밑에 있었음)
근데 처음에 전체 컨테이너 잡을 때 너비만 지정하고 세로값은 안줘서 궁금함..
position static : 문서의 흐름에 맞춰 배치.default (위치를 지정해서 배치) relative : 위칫값을 지정할수 있다는 점을 제외하면 static absolute : relative값을 사용한 상위요소 기준으로 위치를 지정해서 배치 fixed : 브라우저 창을 기준으로 위치를 지정해 배치 (고정역할)
absolute를 사용할때 주의해야 할점
위치값을 지정하면 요소중에서 relative를 사용한 요소를 기준으로 위치를 지정....
만약 부모요소중에 없으면 상위요소를 찾고 이것마저 없으면 더 위의 요소를 찾는다.
absolute를 쓰고 싶다면 부모요소에 relative를 지정해야 원하는 대로 배치할수 있다.
바디 기준으로 왼쪽, 위쪽에서 50픽셀만큼 떨어지게
화면을 줄여도 고정되어있는 사각형
만들기~~
relative-2를 (100에서 200으로 바꿨지만) 왼쪽 200 위로 -50고정~
Absolute를 사용할 때 주의할점
위치값을 지정하면 요소중에서 relative를 사용한 요소를 기준으로 위치를 지정함…
만약 Absolute을 준 요소, 의 상위를 찾는데 만약
근데 그 위에 요소도 없어 그러면 더 위에 올라가서 찾게 됨.
(=만약 부모요소에서 없으면 상위요소를 찾고
이것마저 없으면 또 위로 올라가서 찾아~
할아버지 찾고~)
결론 어떠한 요소에 Absolute를 쓰고 싶다면
부모 요소에 반드시 relative를 지정해야 원하는대로 배치할 수 있다.
background-repeat repeat : 브라우저 화면에 가득찰때까지 가로세로 반복 default repeat-x : 브라우저 화면 너비에 가득 찰때까지 가로로 반복 repeat-y : 브라우저 화면 높이에 가득 찰때까지 가로로 반복 no-repeat : 한번만 표시하고 반복 ㄴㄴ
background-position : 배경이미지의 수평,수직 위치값을 설정할수 있음.
값두개있는거-> 레프트는 수평 center는 수직
하나있으면 수평위치값 (수직 위치값은 50이나 센터로 간주)
사실 50,센터? 하는 말 다 적긴했는데 지금보니 뭔소리인지 잘모르겠네
박스 모델에 패딩이나 테두리가 있다면 배경이미지를 패딩까지 표시하거나 테두리까지 포함해서 표시 할수 있음. 배경 이미지를 적용할 범위는 background-origin속성으로 지정함. content-box : 박스 모델에서 내용부분에만 배경이미지 표시 default adding-box : 박스 모델에서 패딩까지 배경 이미지 표시 border-box : 테두리까지...
<span> HTML <span> 요소는 구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다. 스타일을 적용하기 위해서, 또는 lang 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있습니다. 적절한 의미를 가진 다른 요소가 없을 때에만 사용해야 합니다. <span>은 <div>와 매우 유사하지만, <div>는 블록 레벨 요소인 반면 <span>은 인라인 요소입니다.
