TIL (Today I learned)
오늘 나는 무엇을 했나요
- React 입문 1주차
- UX집중반
오늘은 어떤 것을 배웠나요
-React 입문 1주차
Props
Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법이다.
중요한 점은:
- 단방향으로만 흐른다. 즉, 부모 → 자식 방향으로만 데이터가 전달된다.
- 읽기 전용이다. 자식은 부모로부터 받은 데이터를 변경하지 않는다.
예를 들어, Mother 컴포넌트가 Child 컴포넌트에 name 값을 전달하려면
function Mother() {
const name = '홍부인';
return <Child motherName={name} />; // name을 motherName으로 전달
}
Child 컴포넌트에서는 props를 사용하여 이 값을 받을 수 있다!
function Child(props) {
console.log(props); // props에 전달된 값이 보인다
return <div>{props.motherName}</div>; // 화면에 표시
}
값을 받았으면 화면에 표시를 해야하는데 그 방법은 {props.motherName}로 꺼내서 사용할수있다.
할수있는 이유는 props는 object literal 형태이기 때문이다
Children
props을 사용할때 특별한 props가 있는데 바로 Children이다
이것은 부모 컴포넌트가 자식 컴포넌트에 직접 전달할수있다.
function App() {
return <User>안녕하세요</User>; // '안녕하세요'라는 텍스트를 User 컴포넌트에 전달
}
function User(props) {
console.log(props.children); // '안녕하세요'가 콘솔에 출력됨
return <div>{props.children}</div>; // 화면에 표시
}위에 식처럼 children은 태그안에 모든 내용을 전달하는 형식이다.
간단하게 차이점을 표로 작성하면 아래처럼 볼수가있다.
구조 분해 할당과 Props
props는 객체 형태로 전달되기 때문에, 구조 분해 할당을 사용하면 코드를 더 간결하게 작성할 수 있다!
function Todo(props){
return <div>{props.todo}</div>
}위에 예시처럼 props를 받을때는 모두 props.를 붙여야만 했다.
하지만 이것을 더 간결하게 쓰기 위해 구조 분해 할당을 사용하는것이다. props는 객체형태의 데이터이므로
아래와 같이 작성할수가있다.
function Todo({ title }) {
return <div>{title}</div>; // props.title 대신 {title}로 간단히 사용
}예시처럼 한개만 있을때는 이런식으로 작성하지만 여러개의 props를 받는다면 {}안에 여러개의 props를 써주면 된다!
function Todo({ title, body, isDone, id }){
return <div>{title}</div>
}
- UX집중반 ( UX 프로젝트)
오늘은 핵심문제 정의를 위해서 먼저 지금까지 모은 데이터를 팀원마다 일을 정해서
어피니티다이어그램으로 분류 라벨을 적어 구별을 하였다.
이런식으로 차량사용전, 차량사용중, 차량이용후, 후결제를 나눈다음 그안에서 발생하는 핵심문제를 찾는 과정을 거쳤다.
여기서는 중복된것이나 잘못된정보등이 있었는데 그런것들은 모두 제외를 하고 어피니티다이어그램에서 정리한내용에서 한번더 필터를 거쳤다.
쏘카의 핵심가치는 언제,어디서든 효율적으로 차를 빌릴 수 있는 것이며
소비자 니즈는 간단한 대여 절차와 편리하고 경제적인 이용이므로
이 두가지를 저해시키는 문제점들을 찾아서 구분을 하였다.
오늘은 어떤 문제를 겪었고, 앞으로는 어떻게 해결할 것인가요
앱특성상 가볍게 사용할 수없고 플로우를 보기 위해서는 면허증으로 가입을 해야하며
다른 앱(커머스,소셜,등등)과 달리
실제 경험을 하기위해선 차량을 운전하고 반납까지 경험을 해야 문제점을 이해하고
사용자를 공감할수있어서 이러한 부분이 어려웠다.
그래서 주변에 쏘카를 이용한적이 있거나 평소 이용하는 사람들대상으로 사용성테스트를 진행하거나 구글폼등으로 정성적데이터를 더 얻어야할것같다.