WIL 10주차 (UX집중반)

- FACTS(사실, 객관) :이번 일주일 동안 있었던 일, 내가 한 일

1.리액트 입문주차에서 화살표함수,삼항연산자,모듈,props,Children,state, dom과 가상 dom 를 배웠다.

2.집중반 리서치를 기반으로 핵심문제를 정의하였다.

 

- FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌

리액트를 배우면서 잘 배우고있는지 모르겠다. 하지만 계속 해나가는중

- FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것

---

리액트 입문강의

일주일동안 배운것을 두문장으로 요약을 해보았다.

 

화살표 함수: ES6에서 도입된 간결한 함수 표현식으로, function 키워드 대신 =>를 사용하며, 자신의 this를 가지지 않는다 

// 일반 함수
function add(a, b) {
  return a + b;
}

// 화살표 함수
const add = (a, b) => a + b;

console.log(add(2, 3)); // 출력: 5

삼항 연산자: 조건에 따라 값을 선택하는 단축 표현식으로, 조건 ? 참일 때 값 : 거짓일 때 값 형태를 가진다.

const age = 18;
const message = age >= 18 ? "성인입니다." : "미성년자입니다.";

console.log(message); // 출력: 성인입니다.

 

모듈: 코드의 재사용성과 유지보수를 위해 분리된 파일 단위로, import와 export를 통해 다른 파일과 데이터를 주고받을 수 있다.

export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

 

import { add, subtract } from './math.js';

console.log(add(5, 3)); // 출력: 8
console.log(subtract(5, 3)); // 출력: 2

 

Props: React에서 컴포넌트 간 데이터를 전달하기 위한 읽기 전용 객체로, 부모가 자식에게 값을 전달할 때 사용된다.

// 부모 컴포넌트
function Parent() {
  return <Child name="React" />;
}

// 자식 컴포넌트
function Child(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// 출력: Hello, React!

 

Children: React 컴포넌트에서 중첩된 자식 요소를 가리키는 특수 props로, props.children을 통해 접근 가능함.

function Wrapper({ children }) {
  return <div className="wrapper">{children}</div>;
}

function App() {
  return (
    <Wrapper>
      <p>This is a child component.</p>
    </Wrapper>
  );
}

// 출력: <div class="wrapper"><p>This is a child component.</p></div>

 

State: React 컴포넌트의 동적 데이터 저장소로, 사용자 상호작용에 따라 값이 변경되며 UI를 업데이트한다.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// 버튼 클릭 시: Count: 1, Count: 2 ...

 

 

오늘은 돔과 가상돔을 배웠다.

그전에 브라우저가 화면을 그리는원리를 이해했다.

 

브라우저는 웹페이지를 그림 그리기처럼 화면에 표시한다.
이때 웹페이지는 나무처럼 생긴 DOM 트리로 만들어지는데, 트리의 각 가지는 페이지의 요소(텍스트, 이미지 등)를 나타낸다.

 

DOM과 가상 DOM
DOM는 웹페이지를 나타내는 진짜 나무(트리)이다.
가상 DOM는 진짜 나무를 복사해서 만든 가짜 나무인데, 리액트가 사용한다.
리액트는 가상 DOM을 먼저 바꾸고, 진짜 DOM에서 바뀐 부분만 고쳐서 훨씬 빠르게 화면을 바꿀 수 있다.

리액트가 화면을 바꾸는 방법
1.가상 DOM 생성: 화면이 바뀌기 전과 후의 가상 DOM을 만든다.
2.비교: 바뀐 부분을 찾아낸다.
3.업데이트: 바뀐 부분만 진짜 DOM에 적용한다.

예시로 SNS에서 "좋아요" 버튼을 누르면 빨간 하트가 뜨는데,
리액트는 화면 전체를 바꾸지 않고, 하트만 바꾸는 방식으로 작동하여 앱이 빠르고 부드럽게 움직이는것이다.

---

UX집중반 핵심문제정의 피드백

오늘은 리서치에 대한 서로다른 팀들끼리 코멘트를 주고받다가 튜터님의 피드백을 받았다.

 

문제정의를 잘 했다 하지만 추가적으로 하면 좋은 것으로 사용자들이 이런 불편 사항을 겪는 걸로 인해서 쏘카 사용자의 핵심 목표랑 공급자 관점에서 목표 달성에 어떤 영향을 미치는지 를 판단하는것도 좋다고 하셨다.

그외 다른 팀원과의 코멘트로 많은 피드백을 받았으며, 이것을 바탕으로 다음주차도 잘 진행 할 수있을것같다.

 

---

결과적으로, 현재 나의 상태는 어떻게 되었지?

화면이 변하는 원리를 이해했고, 그 변하는 방법을 사용할 수 있다.

이 상태에서 다음 일주일을 더 잘 보내려면 무엇이 필요할까?

주말에 state의 사용법을 마스터 해야 기본적인 화면구성을 할 수있을것이다.