영최의 개발켈로그

1.Sass란? Syntactically Awesome Style sheets의 약자로, CSS 전처리기를 이용해서 복잡한 작업을 보다 쉽게 한다. CSS 전처리기란? 자신만의 특별한 문법을 가지고 CSS를 생성하는 프로그램으로, 변수, 함수 개념을 사용하여 재활용성과 가독성을 높인다. 가.확장자 종류 .sass: 세미 콜론(;)과 중괄호({})를 사용하지 않고 탭(tab)을 이용해서 스타일을 정의한다. .scss: 기존의 .css파일과 비슷한 문법을 이용하지만 부모 { 자식{}} 관계로 상하관계를 표현가능하다. 또한 sass보다 더 넓은 범용성과 css와의 호환성이 좋기 때문에 아래에서 scss를 사용하는 방법을 소개하고자 한다. 나.설치 방법 버전 문제로 인해 npm install node-sass에..

1.Hooks란? 함수형 컴포넌트에서 React의 state와 lifecycle을 연동할 수 있게 해주는 함수이다. 즉, 클래스형 컴포넌트의 기능을 함수형 컴포넌트에서 사용할 수 있도록 해주는 기능으로, 이 기능이 있기에 이제 클래스형 컴포넌트를 함수형 컴포넌트가 완전히 대체할 수 있게 되었다. 가.사용 규칙 공식 문서에 따르면 Hook의 사용 규칙은 두가지이다. https://ko.legacy.reactjs.org/docs/hooks-rules.html#explanation Hook의 규칙 – React A JavaScript library for building user interfaces ko.legacy.reactjs.org ✅ 첫번째, 함수형 컴포넌트에서만 Hook를 사용할 수 있다. 당연하다...

1.Life Cycle Life Cycle이란 수명 주기를 의미한다. 그럼 누구의 수명 주기인가? 컴포넌트의 수명 주기이다. 그럼 어떨 때 사용하는가? 보통 컴포넌트의 수명은 페이지에 렌더링 되기 전에 시작하여 페이지에서 사라질 때 끝난다. 이 라이프사이클을 사용하면 컴포넌트를 처음 렌더링할 때 어떤 작업을 처리하거나, 컴포넌트를 업데이트하기 전 어떤 작업을 처리해야할 때 사용한다. 가.분류 라이프사이클은 총 세가지 카테고리로 나뉘는데 마운트, 업데이트, 언마운트가 있다. 마운트: DOM이 생성되고 웹브라우저 상에 나타남 업데이트: props나 state가 바뀌었을 때 등등 업데이트함 언마운트: DOM에서 컴포넌트가 제거될 때 위와 같이 각각의 수명 주기일 때에 맞추어 어떤 작업을 끼워넣는다고 생각하면 ..

1. ref란? Refenrence의 약자로, render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법이다. HTML에서 요소를 선택할 때 아래와 같이 id를 지정해서 요소를 선택하지만 내용 리액트의 경우 컴포넌트가 중복되면 id 또한 중복될 수 있다는 문제점이 있다. 그러나 이 ref를 사용한다면 컴포넌트 내부에서만 작동되므로, 문제가 되지 않는다. 즉, DOM을 직접적으로 건드려야할 때 ref를 사용한다. (예를 들면, input 태그에 focus를 주거나, cusor:pointer로 지정할 때) 그러나 남용하기보다는 만약 state를 지정할 수 있다면 state를 사용하자. 그 이유는 리액트에서는 랜더링할 때 ref의 current 값을 알 수 없기 때문이다. ref의 경우 ..

1.map() 어떤 배열 -> 새로운 배열로 만들고자 할 때 map()함수를 사용한다. map()함수의 인자는 callback함수이다. arr.map(callback(currentValue[, index[, array]])[, thisArg]) 이 콜백함수의 인자는 currentValue: 처리할 현재 요소 index: 현재 요소의 인덱스 - optional array: map()을 호출한 배열 - optional 으로 총 3가지의 인자를 가진다. thisArg 는 callback을 실행할 때 this로 사용되는 값이다. 아래의 예시를 확인해보자 let numbers = [1, 4, 9]; let doubles = numbers.map((num) => { return num * 2; }); doubles..

1. 리액트에서의 이벤트 핸들링 이벤트를 통해서 사용자와 웹 브라우저는 서로 상호작용을 할 수 있다. 이벤트 핸들러는 "어떠한 사건에 대한 동작을 다룬다" 라는 의미이다. 리액트에서의 이벤트 핸들러와 html에서의 이벤트 핸들러는 아래와 같이 몇개의 차이점이 있다. 리액트에서는 객체로 전달해야하고, html에서는 괄호()까지 작성해야 동작하는데, 작동 방식의 차이라고 생각하면 될 것 같다. 아래 주의 사항을 통해 더 자세히 알아보도록 하자. 가.React의 Event 주의점 1)카멜표기법 첫번째로, 이벤트 이름은 카멜표기법으로 작성해야한다. 예를 들면 onclick -> onClick / onkeyup -> onKeyUp으로 작성한다. 2)함수 자체를 객체로 전달 두번째로, 실행할 자바스크립트 코드를 전..

1.state란? state란 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. React에서 앱의 유동적인 데이터를 다루기 위한 개체로, 계속해서 변하는 특정 상태이다. 상태에 따라 다른 동작을 할 수 있게 한다. 사용하는 이유는 동적인 데이터이므로, 변수와 달리 state가 변경될 시 자동적으로 재랜더링해야하기 때문이다. state와 props의 다른 점은 아래와 같다. 즉, state는 해당 컴포넌트 내부에서 사용되는 값이고, props는 부모 컴포넌트에서 상속받아서 자식컴포넌트에서 사용되는 값이다. 앞선 포스팅에서도 말했듯이 2023.04.23 - [프론트앤드/React] - [포스코x코딩온] 웹개발자 입문 과정 8주차 | 컴포넌트(함수형|클래스형) [포스코x코딩온] 웹개발자 입문 과정 8주차 | ..

1.Props란? props는 properties를 줄인 표현으로, 컴포넌트의 속성을 설정할 때 사용하는 요소이다. props값은 부모 컴포넌트에서 설정할 수 있다. 가.사용 방법 아래와 같이 MyComponent컴포넌트(자식 컴포넌트)를 수정하여 해당 컴포넌트에서 name이라는 props를 렌더링한다고 하면 아래와 같이 코드를 작성할 수 있다. props값은 (자식)컴포넌트 함수의 파라미터로 받아와서 사용할 수 있다. props를 렌더링할 때는 앞서 배웠던 것처럼 JSX내부에서 {}기호로 감싸주면 된다. [ MyComponent컴포넌트(자식 컴포넌트) ] import React from 'react'; const MyComponent = (props) => { return 안녕하세요, 제 이름은 {pr..