본문 바로가기

전체 글

 (35)
React - 컴포넌트 스타일링(스터디) 가장 흔한 방식의 일반 CSS 기존의 CSS 스타일링이 불편하지 않거나 새로운 기술을 배울 필요가 없다고 생각되면 일반 CSS를 사용해도 상관없다. 이름 짓는 규칙 클래스 이름이 컴포넌트 이름 - 클래스 형태로 지어져 있다.(예: App-header) 클래스 이름에 컴포넌트 이름을 포함시킴으로써 다른 컴포넌트에서 실수로 중복되는 클래스를 만들어 사용하는 것을 방지함! BEM 네이밍 블록(Block) 요소(Element) 수식어(Modifier) Block 독립적인 의미를 가지는 추상화된 컴포넌트를 의미한다. ex) user-component__title Element 블록의 구성요소이다. 자신이 속한 Block내에서만 의미를 가지기 때문에 Block에 의존적이다. ex) user-component__ti..
React - ref(스터디) 리엑트 컴포넌트 안에서 id 사용 여부 -> 리엑트 컴포넌트 안에서도 id를 사용할 수 있다 JSX 안에서 DOM에 id를 달면 해당 DOM을 렌더링할 때 그대로 전달된다. 하지만 특수한 경우가 아니면 권장X 왜냐하면 같은 컴포넌트를 여러번 사용해야 하는데 중복 id를 가진 DOM이 여러개 생기니 권장하지 않는다!! ref는 어떤 상황에서 사용해야 할까? "DOM을 꼭 직접적으로 건드려야 할 때" 이다. DOM을 꼭 사용해야 하는 상황 특정 input에 포커스 주기 스크롤 박스 조작하기 Canvas 요소에 그림 그리기 등 이땐 어쩔 수 없이 DOM에 직접적으로 접근해야 하는데 이를 위해 ref를 사용한다 콜백 함수를 통한 ref 설정 ref를 만드는 가장 기본적인 방법은 콜백 함수이다 ref를 달고자 하..
WIL(2023.12.31) Virtual Dom(가상 Dom): 실제 DOM과 비교: React는 브라우저에 실제로 표시되는 DOM 대신 가상 DOM을 사용하여 작업한다 UI 상태가 변경되면 React는 가상 DOM을 새로 만들고 현재의 가상 DOM과 이를 비교한다 효율적인 업데이트: 변경된 부부만을 찾아내어 실제 DOM에 적용한다. 이를 통해 불필요한 DOM 조작을 최소화하고 성능을 향상시킨다 재조정 방지: 가상 DOM은 메모리에 존재하므로 실제 DOM에는 빈번한 조직이 발생하지 않는다 Proos(속성): 데이터 전달: 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 사용된다 부모가 자식에게 속성을 통해 정보를 제공함으로써 컴포넌트 간에 상호작용이 가능하다 읽기 전용: Props는 읽기 전용이기 때문에 자식 컴포넌트에서 ..
React - 컴포넌트(스터디) 3-1 클래스형 컴포넌트 App 컴포넌트는 함수 컴포넌트이다. // App.js import "./App.css"; function App() { const name = "리엑트"; return {name}; } export default App; 클래스형 컴포넌트로 변환 import { Component } from "react"; class App extends Component { render() { const name = "react"; return {name}; } } export default App; 함수 컴포넌트랑 클래스형 컴포넌트 역할은 같다!! 그렇다면 뭐가 다를까요? 바로 이후에 배울 state 기능 및 라이프사이클 기능을 사용할 수있다는 것과 임의 메서드를 정의할 수 있다는 것이 다..
WIL(2023.12.24) 이번 한주동안 팀원분과 페어 프로그램을 진행했다. 혼자서는 해결하지 못할 문제를 페어와 함께 진행하다보니 새로운 아이디어도 생겨나고 페어를 통해 많은 것을 배울 수 있었다. 서로 네비게이터, 드라이버가 되며 문제를 하나하나 해결해 나아갈 때 그 뿌듯함은 잊을 수 없다. 항해에서 페어프로그램을 알게 되고 직접 해볼 수 있어서 너무 좋았고 실전 프로젝트 전까지 페어와 함께하는 과제를 진행하며 한발씩 나아가는 내가 될 것이다. 이제 React를 배우게 되는데 주특기를 React로 선택한만큼 앞으로 3주 동안 많이 배우고 많이 성장할 것이다. 어제의 나보다 오늘의 내가 더욱 더 발전하는 그날까지 파이팅
React로 추가, 삭제 기능 만들기 App.jsx import "./App.css"; import React, { useState } from "react"; import Button from "./components/Button"; import User from "./components/User"; function App() { const [users, setUsers] = useState([ { id: 1, age: 30, name: "송중기" }, { id: 2, age: 24, name: "송강" }, { id: 3, age: 21, name: "김유정" }, { id: 4, age: 29, name: "구교환" }, ]); const [name, setName] = useState(""); const [age, setAge] = ..
React - filter, map import "./App.css"; import "./App.css"; function App() { const testArr = ["감자", "고구마", "오이", "가지", "옥수수"]; return ( {testArr .filter(function (item) { return item !== "오이"; }) .map(function (item) { return {item}; })} ); } export default App;
React map함수 import "./App.css"; import "./App.css"; function App() { const testArr = ["감자", "고구마", "오이", "가지", "옥수수"]; return ( {/* {testArr.map(function (item) { return {item}; })} */} {testArr.map((item) => { return {item}; })} ); } export default App;

티스토리툴바