프레임워크160 [React] useRef - DOM 요소 접근 [ 개념 ] useRef()를 호출하면 ref 객체를 반환합니다. 이를 접근 하고자 하는 요소 태그에 ref 속성으로 넣어주면 원하는 태그에 언제든지 접근 할 수 있습니다. 예를 들어 text box와 같은 input 요소에 focus를 줄 때 사용 할 수 있습니다. 로그인 페이지에 접근 했을 때 ref를 사용하여 input 태그에 focus를 설정 해주면 사용자가 클릭 할 필요가 없어지기 때문에 편리 하겠죠?? ref를 사용하면 손쉽게 DOM 요소에 접근 할 수 있습니다. (바닐라 JS의 document.querySeletor()와 같은 역할을 합니다.) [ 실습 ] function App() { const inputRef = useRef(); useEffect(() => { inputRef.curre.. 2022. 1. 25. [React] useRef - 변수 관리 [ 개념 ] 함수형 컴포넌트에서 useRef()를 호출하면 ref를 반환 해줍니다. ref 객체는 언제든 지 수정 할 수 있습니다. 반환된 ref는 컴포넌트의 전 생의 주기를 통해 유지가 됩니다. 즉, 컴포넌트가 계속 리렌더링이 되어도 언마운드 되기 전까지는 값을 유지 합니다. [ useRef는 언제 사용 될까요?? ] 첫번째 - 저장공간 ref는 state와 비슷하게 어떠한 값을 저장하는 저장 공간으로 사용됩니다. 함수형 컴포넌트는 함수이기 때문에 렌더링이 일어나면 함수를 다시 불러 옵니다. 그 때문에 안에 있는 변수들이나 함수들이 다시 불러와 져서 초기화가 됩니다. 두번째 - DOM 요소에 접근 ref를 통해 실제적으로 DOM 요소에 접근해서 여러가지 일을 할 수 있습니다. 예를 들어 input 태그.. 2022. 1. 25. [생활코딩] 타이포그래피 - 웹폰트 [ 웹폰트란? ] : 웹폰트는 사용자가 가지고 있지 않은 폰트를 웹페이지에서 사용 할 수 있는 방법입니다. 폰트를 서버에서 다운로드 하는 방식이라고 할 수 있습니다. (구글에서 제공하는 무료 웹폰트 서비스인 google fonts를 이용 했습니다.) Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis lacus eu ex rhoncus pretium. Sed vestibulum risus pharetra, consequat nibh ac, ornar.. 2022. 1. 25. [CSS] linear-gradient CSS 속성 중 linear-gradient()를 사용하면 그라데이션을 줄 수 있다. linear-gradient() - CSS: Cascading Style Sheets | MDN The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the data type, which is a special kind of . developer.mozilla.org See what's next body { margin: 0; height: 2000px; background-c.. 2022. 1. 25. [생활코딩] 타이포그래피 - font [ font-family ] : 폰트의 글꼴을 지정하는 속성(property)으로써 비슷비슷한 폰트들을 우선 순위에 따라서 보여주기 때문에 font-family라는 이름을 사용합니다. Hello World Hello World + serif vs sans serif : serif는 글꼴에서 사용하는 장식을 의미합니다. sans는 부정을 표현합니다. 즉, sans serif는 serif가 아니다. (장식이 없다)는 뜻입니다. [ font-size ] : 폰트의 크기를 지정하는 속성(property) Hello World Hello World [ font-weight ] : 폰트의 두께를 지정하는 속성(property)입니다. [ font-height ] : 폰트의 자간을 지정하는 속성(property)입니.. 2022. 1. 24. [생활코딩] 타이포그래피 - text-align text를 정렬 할 때는 text-align을 사용합니다. 속성에는 left, center, right가 있습니다. 그 밖에 왼쪽과 오른쪽이 공평하게 화면을 차지하게 하고 싶을 때는 text-align 속성에 justify를 넣어주면 아래의 그림처럼 왼쪽과 오른쪽이 공평하게 화면을 차지합니다. 2022. 1. 24. [생활코딩] 타이포그래피 - color color라는 속성 자체는 어렵지 않지만, 원하는 컬러를 지정하는 부분이 조금 어렵습니다. 컬러를 지정하는 방법에는 크게 세가지 방식이 있습니다. Color Name vs hex vs rgb [ Color Name을 사용 할 경우 ] Hello World Hello World [ hex를 사용 할 경우 ] 아래와 같이 #색상코드 형태로 사용 합니다. Hello World [ rgb를 사용 할 경우 ] 아래와 같이 red의 r, green의 g, blue의 b를 합친 rgb() 형태로 색상 코드가 나옵니다. Hello World CSS RGB and RGBA Colors W3Schools offers free online tutorials, references and exercises in all the .. 2022. 1. 24. [생활코딩] 속성을 공부하는 방법 [ 선택자 ] 사람의 말에서 주어 역할을 합니다 주어와 함께 문장을 구성하는 핵심은 서술어입니다. CSS에서 서술어에 해당하는 부분은 선언부 입니다. 선언부에 있는 구체적인 효과 하나하나를 속성(property)라고 합니다. [ 속성(property) ] (중요도에 따라 작성 할 예정이고 여기서 중요도는 빈도수를 의미한다. 이 강의 영상은 2016년에 만들어진 것이기 때문에 현재는 다를 수 있다) 2022. 1. 22. [생활코딩] 다양한 선택자들 CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 2022. 1. 21. 이전 1 ··· 10 11 12 13 14 15 16 ··· 18 다음 728x90
