본문 바로가기
SMALL

분류 전체보기527

React) ref - DOM에 이름 달기, state를 이용해 기능 구현 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 일반 HTML에서 DOM 요소에 이름을 달 때는 id를 사용하지만, 리액트에서는 ref를 사용합니다. ※ 리액트에서 id값이 아닌 ref를 사용하는 이유는? - 같은 컴포넌트를 여러 번 사용한다고 할 때, id는 유일해야 하는데, 중복 id를 가진 DOM이 여러 개 생길 수 있으니, 문제 발생 원인이 될 수 있음! ref: DOM에 이름 달기 ref를 사용해야 하는 상황 DOM를 직접적으로 건드려야 할 때 ref를 사용합니다. 예를 들어, javascript 혹은 jQuery로 만든 웹 사이트는 특정 input 요소를 찾을 때 해당 id값을 가진 input에 클래스를 설정해주곤 합니다.. 2022. 11. 11.
React) 이벤트 핸들링 (클래스형 컴포넌트, 함수형 컴포넌트) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 이벤트 핸들링 이벤트 사용 시 주의 사항 ① 이벤트 이름은 카멜 표기법으로 작성 - oncick → onClick 혹은 onkeyup → onKeyUp ② 이벤트에 실행할 자바스크립트 코드 전달이 아닌 함수 형태의 값을 전달 - 화살표 함수 문법으로 함수를 생성하여 전달 혹은 외부에 미리 만들어서 전달 ③ DOM 요소에만 이벤트 설정 가능 - div, button, input, form, span 등의 DOM 요소에는 이벤트 설정 가능하지만, 만든 컴포넌트에는 설정 불가 - 하지만, 전달받은 props 를 컴포넌트 내부의 DOM 이벤트로 설정은 가능 이벤트 종류 Clipboard To.. 2022. 11. 10.
React) state에 대해서 (클래스형 컴포넌트의 setState, 함수형 컴포넌트의 useState) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. state - 컴포넌트 내부에서 바뀔 수 있는 값 props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값으로, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있습니다. 즉, props를 변경하려면 부모 컴포넌트에서 바꿔줘야 하는 것이죠. 그에 반면 state는 컴포넌트 내부에서 값을 변경할 수 있습니다. 클래스형 컴포넌트의 state Counter.js import { Component } from "react"; class Counter extends Component { constructor(props) { super(props); // state 초깃.. 2022. 11. 1.
React) props에 대해서 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. props - properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소 - 사용하는 부모 컴포넌트에서 설정할 수 있음 props 렌더링 및 값 지정 MyComponent.js const MyComponent = props => { return 안녕하세요, 제 이름은 {props.name}입니다.; }; export default MyComponent; App.js (부모 컴포넌트) import MyComponent from './MyComponent'; const App = () => { return }; export default App; props 기본값 설정 .. 2022. 11. 1.
React) 컴포넌트의 종류, 컴포넌트 생성해보기 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 컴포넌트의 종류 함수형 컴포넌트 import React from 'react'; import './App.css' function App() { const name = '채니'; return {name} } export default App; 함수형 컴포넌트의 장점 선언이 편리 메모리 자원을 아낄 수 있음 (클래스형 컴포넌트에 비해) 빌드 후 배포할 때도 결과물의 파일 크기가 더 작음 함수형 컴포넌트의 단점 state와 라이프사이클 API의 사용 불가 (단, v16.8 이후 Hooks를 통해 해결) 클래스형 컴포넌트 반드시 render 함수가 있어야하고 JSX를 반환해야함 import.. 2022. 11. 1.
React) JSX 문법에 대하여 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. JSX 문법 감싸인 요소 : 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야함 이유는? Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교하기 위해 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 존재하기 때문! 잘못된 문법 function App() { return ( 리액트 안녕! 잘 작동하니? ); } 컴포넌트 내에 h1, h2 요소가 존재하는데 이를 감싸는 부모 요소가 없으니 오류가 발생하는 것을 확인할 수 있습니다. 올바른 문법 ① div 태그 사용 function App() { return ( 리액트 안녕! 잘 작동하니?.. 2022. 10. 27.
LIST

티스토리툴바