✨ Front-end/리액트(React)15 [React] useRef의 개념과 2가지 사용법 useRef란? React에서 사용되는 Hook 중 하나로, 함수형 컴포넌트에서 변수를 저장하고 관리하는 데 사용된다. useRef를 사용하면 함수형 컴포넌트 내에서도 값이 유지되며, 이전 값에 접근할 수 있다. 일반적으로 useRef는 DOM 요소에 대한 참조를 생성할 때 사용된다. 그러나 useRef는 단순히 DOM 참조가 아니라, 컴포넌트 전체에서 유지하고 싶은 어떤 값에도 사용할 수 있다. useRef는 .current 속성을 사용하여 값에 접근하거나 값을 변경할 수 있다. .current를 통해 접근된 값은 컴포넌트가 리렌더링되어도 변경되지 않는다. React에서 useRef는 크게 두가지 용도로 활용된다. 렌더링 시 초기화 되지 않고 유지되는 조작 가능한 변수 값을 선언할 경우 일반 JavaS.. 2023. 9. 21. [React] CSS 적용방법 (inline, CSS 파일, 모듈형 CSS 파일) 3가지 CSS를 적용하는 방법 3가지 인라인 (inline) styling 적용 Css styling 작성 후 Component에서 css파일 import css-module 사용 1. 인라인 styling (1) return문 안에서 인라인 스타일을 지정하여 css를 적용시켜준 예이다. 인라인 styling (2) 2. CSS 활용 ' ' 홀 따옴표 대신해서 " " 쌍 따옴표를 사용해도 정상적으로 작동된다. 인라인 Styling의 장점 CSS파일을 작성할 필요가 없다. 자바 스크립트 로직을 css파일에 먹일 수 있다. 단점 인라인 스타일로 작성하다 보니 태그에 스타일이 남으며 가독성이 떨어지고, 유동적인 조작이 힘들다. CSS파일의 장점 CSS의 개발 형식을 그대로 사용이 가능하다. 단점 파일 재사용 시 js.. 2023. 9. 21. [React] Prop 프로퍼티 사용하기 Prop 이란? properties의 줄임말로, 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다. (단방향 데이터 흐름) 프로퍼티는 수정할 수 없다는 특징이 있다. 자식입장에선 읽기 전용인 데이터이다. 프로퍼티에 문자열을 전달할 때는 큰따옴표 (" ")를, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용한다. Ex1) 기본적인 Prop src 아래에 component 폴더를 만들어 Comp1.js를 생성후 함수를 만들었다. 이 컴포넌트는 val1이라는 속성(props)을 받아서 해당 속성을 사용하여 "Hello {val1}"을 렌더링한다. 이후 export default Comp1로 외부에서도 사용할 수 있게 만들어 Comp1 컴포넌트를 내보낸다. 기본적인 Prop이 실행된 것을 볼 수 있.. 2023. 9. 20. [React] 조건문과 반복문(map) , toggle 사용하기 조건문(삼항연산자) React는 JSX를 쓰기 때문에, JSX 문법을 사용해서 html과 js를 혼합해서 사용한다. JSX 내부의 자바스크립트 표현식에선 if문을 사용할 수 없다. 따라서 삼항연산자를 사용하게된다. 삼항연산자 조건식 ? 참 : 거짓 HTML 삽입 미리보기할 수 없는 소스 react 안에 있는 html 문법에서 if() 를 쓸 수는 없으므로, { } 안에 삼항연산자를 이용해 해당 기능을 대신 처리한다. 위 코드에서 useState를 사용해 모달 기능을 구현한 예시가 있다. 모달을 클릭하면 컴포넌트 예제 모달창이 나타났다 사라졌다 할 수 있게된다. 반복문(map) HTML 삽입 미리보기할 수 없는 소스 위와 같이 반복문 또한 { } 태그 안에 map을 사용해서 나타낼 수 있다. [1,2,3].. 2023. 8. 6. 이전 1 2 3 4 다음
