Front-end (8) 썸네일형 리스트형 css 정리 (2) 포지션 position : relative vs static 일반적으로 요소들의 position 속성 값은 static이 기본값이다. static 이란 위치를 지정하지 않는다는 의미를 가진다. 그렇기 때문에 위치와 관련된 top, bottom, left, right 등의 속성을 지정해도 적용되지 않는다. 아래 코드를 통해 이 말의 의미를 알아보자. me 이렇게 id=me 인 요소의 position 속성을 지정하지 않았다. 이렇게 되면 기본 값으로 static을 가진다. 그렇기 때문에 top:100px가 적용되지 않는다. top 속성을 반영하려면 position 을 relative로 주면 된다. position : absolute 포지션을 absolute로 설정하면 해당 요소의 크기는 자기가 차지하는 만큼으로 변.. css 정리 - (1) inline & block level, box sizing inline & block 두 속성은 태그가 차지하는 영역을 나타냅니다. Hello world 안녕하세요. jxxhxxx입니다. 아래 빨간 테두리가 태그가 차지하는 영역입니다. inline 필요한 영역만 block level 화면 전체를 다씀 태그마다 영역을 차지하는 것은 태그 특징에 알맞게 지정이 되어 있지만 display 속성을 통해 변경할 수도 있습니다. h1 { display:inline; } box sizing 아래 css와 실제 화면에 랜더링된 모습을 살펴봅시다. Hello Hello 요소의 크기는 패딩 내부의 컨텐츠로 결정이 된다고 합니다. 이것을 보고 각각의 요소의 크기가 같다고 느끼기 쉬울까요? 이러한 혼란을 방지하기 위해 우리는 box-sizing 속성을 사용할 수 있습니다. div {.. 리액트 - Hooks (1) useState, useEffect, useReducer 리액트를 깊게 공부한 것이 아니라 잘은 모르겠으나 지금까지 알고 있는 내용을 정리하면 이렇다. 리액트는 지금 함수형 컴포넌트를 밀어주고 있는데 과거에는 클래스형 컴포넌트가 주류였다. 왜냐하면 함수형 컴포넌트에서 할 수 있는 것들이 제한적이기 때문이다. 예를 들면 컴포넌트 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용이 가능하다. 후킹 - 위키백과 를 참고하면 Hook이 의미하는 바를 이해할 수 있다. 리액트에서는 props,state, lifecycle 등 컴포넌트와 관련된 내용을 함수형 컴포넌트에서 다루는 API를 Hook이라고 부르는 것 같다. 일단은 요정도만 이해하고 넘어가려고 한다. 이해를 위해서 자바/스프링 대입법을 사용하고 추론에 의해 작성된 내용이 많으니 틀린 내용이 있다면 지적 부탁드립.. 리액트 - 컴포넌트 반복 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있습니다. map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과를 새로운 배열을 생성합니다. 문법 이 함수의 파라미터는 다음과 같습니다. callback : 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세 가지입니다. 1. currentValue : 현재 처리하고 있는 요소 2. index : 현재 처리하고 있는 요소의 index 값 3. array : 현재 처리하고 있는 원본 배열 thisArg(선택 항목): callback 함수 내부에서 사용할 this 레퍼런스 예제 ES6 문법으로 적용 데이터 배열을 컴포넌트 배열로 변환하기 const Itera.. 리액트 - ref 목차 ref란 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법을 말합니다. DOM을 꼭 직접적으로 건드려야 할 때 ref를 사용합니다. 함수 컴포넌트에서 ref를 사용하면 Hooks를 사용해야 하기 때문에 클래스형 컴포넌트에서 ref를 사용하는 방법을 정리하겠습니다. 특정 input에 포커스 주기 스크롤 박스 조작하기 Canvas 요소에 그림 그리기 등 이럴 때는 DOM에 직접적으로 접근해야 한다고 합니다. ref 사용 현재 상태에서 포커는 인풋 박스에 있다. 빨간색으로 밑줄 친 부분을 통해 확인할 수 있다. 이 상태에서 검증하기 버튼을 누르면 포커스가 버튼으로 이동하게 되는데요. 버튼을 누르더라도 포커스가 다시 인풋으로 돌아오게 할 수는 없을까요? 이럴 때 ref를 사용하면 됩니다. ref를 사용하.. 리액트 - 이벤트 핸들링 목차 1. 이벤트 2. 주의 사항 3. 클래스형 컴포넌트로 이벤트 4. 함수형 컴포넌트로 이벤트 리액트의 이벤트 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트라고 합니다. 예를 들어 버튼에 마우스 커서를 올렸을 때는 onmouseover 이벤트를 실행하고, 클릭했을 때는 onclick 이벤트를 실행합니다. HTML을 사용한 적이 있다면 매우 익숙할 것입니다. 이벤트 사용 시 주의 사항 1. 카멜 표기법으로 작성해야함 2. DOM 요소에만 이벤트를 설정 가능 즉, div, button, input, form 등의 DOM 요소에만 이벤트를 설정할 수 있습니다. 우리가 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없습니다. 이렇게 설정할 시 MyComponent를 클릭할 때 doSom.. 리액트 - 컴포넌트 (2) state 목차 1. state 2.클래스형 컴포넌트 state 3.함수 컴포넌트 useState state 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다. 리액트에는 두 가지 종류의 state가 있습니다. 하나는 클래스형 컴포넌트의 state, 다른 하나는 함수 컴포넌트에서 useState 함수를 통해 사용하는 state입니다. 클래스형 컴포넌트의 state class Counter extends Component { constructor(props) { super(props); //state의 초깃값 설정하기 this.state = { number: 0 }; } 클래스형 컴포넌트 호출부입니다. super를 사용해서 Component 클래스의 생성자를 호출해줍시다. render() { c.. React - 컴포넌트 (1) props 목차 1. props 2. children 3. 구조 분해 할당을 통한 props 내부 값 추출 4. propTypes 5. 클래스형 컴포넌트에서 props props props는 컴포넌트 속성을 설정할 때 사용하는 요소입니다. MyComponent.js const MyComponent = (props) => { return 안녕하세요 제 이름은 {props.name}입니다. }; props 값 지정하기 App.js const App = () => { return ( ); }; children 리액트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 보여주는 props가 children입니다. MyComponent.js const MyComponent = (props) => { return ( 안녕하세요.. 이전 1 다음
