Judaeng
210324_TIL(Twittler React) 본문
✅Toy 문제 power
두 수를 입력받아 거듭제곱을 리턴하는 문제였다.
이 문제는 n의 m승을 곱하여 return 하면 끝나는 문제였지만 시간 복잡도가 있어서 잘 생각해서 풀어야 되는 문제였다.
O(logN)의 복잡도를 가진다고 하는데 나는 결국 끝내 못풀었다.
래퍼런스를 보고 풀었다.
재귀로 값을 절반씩 나눠서 푸는 문제인 것 같다. 이런 문제를 점화식으로 푼다라고 한다고 본 것 같다...💧
트위틀러를 해보기 전에 공식 문서에서 Create React App을 하나 생성해서 만들어보았다.
프로젝트 생성을 하고, my-app 디렉터리로 들어간 뒤에 서버를 실행하면 localhost:3000 주소를 통해 실행 결과를 확인해보았다.
npx create-react-app my-app
cd my-app
npm start
✅Twittler React
리액트 공식문서와 강의를 통해 트위틀러를 만들어보는 스프린트를 진행했다.
하루밖에 시간이 없었지만 생각보다 재밌게 했던 스프린트였다.
리액트 공식문서를 보면서 차근차근해보니 생각보다 이해하기 쉬웠다.
하지만 리액트에 익숙하지 않아서 이벤트 설정, state와 생명주기 등은 어려웠다.
그래도 재밌게 잘 진행한 것 같다. 공식문서를 꼭 참고해야 된다.
Achievement Goals
React 기본
- React를 이용한 컴포넌트 단위 개발의 장점을 이해할 수 있다.
- JSX와 같이 선언적인 형태의 문법을 사용하는 것의 장점을 이해할 수 있다.
React 주요 개념과 사용법
- 함수 컴포넌트와 클래스 컴포넌트를 만드는 방법과 차이를 이해할 수 있다.
- props의 특징과 규칙을 이해할 수 있다.
- props와 state와의 차이점을 이해할 수 있다.
- 상태 변경 방법과, 그 이유를 이해할 수 있다.
- 이벤트를 처리할 수 있다.
- lifecycle을 통해 작동 원리를 이해할 수 있다.
- React 컴포넌트 간 데이터 흐름 및 상호작용의 원리를 이해할 수 있다.
API 문서 연습
- React 공식 문서를 활용할 수 있다.
React를 구성하는 JavaScript 생태계
- Create React App을 구성하고 있는 babel 및 webpack의 목적과 필요성을 이해할 수 있다.
🍒Remember
1. JSX 문법을 도입하게 된 이유가 무엇일까요? 어떤 장점이 있나요?
JSX는 일종의 문법 설탕(sugar)으로 react에서 필수적으로 사용해야 하는 것은 아니지만 JavaScript코드 안에서 UI 관련 작업을 할 때에 시각적으로 더 도움이 된다.
또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해 준다.
1.1 JSX를 사용하지 않고 React를 사용할 수도 있나요? (advanced)
React를 사용할 때 JSX는 필수가 아닙니다.
빌드 환경에서 컴파일 설정을 하고 싶지 않을 때 JSX 없이 React를 사용하는 것은 특히 편리합니다.
JSX로 할 수 있는 모든 것은 순수 JavaScript로도 할 수 있습니다.
// JSX로 작성된 코드
class Hello extends React.Component {
render() {
return <div>Hello {this.props.toWhat}</div>;
}
}
ReactDOM.render(
<Hello toWhat="World" />,
document.getElementById('root')
);
// JSX를 사용하지 않은 코드
class Hello extends React.Component {
render() {
return React.createElement('div', null, `Hello ${this.props.toWhat}`);
}
}
ReactDOM.render(
React.createElement(Hello, {toWhat: 'World'}, null),
document.getElementById('root')
);
2. JSX에 JavaScript 표현식을 쓰려면 어떤 방법으로 써야 하나요?
JSX안에서의 중괄호를 통하여 유효한 모든 JavaScript표현식을 넣을 수 있다.
중괄호 안에는 JavaScript 모든 표현식을 넣을 수 있다.
const name = 'judaeng';
const element = <h1>Hello, {name}</h1>
// 모든 표현식
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}! // JavaScript 함수 호출 결과인 formatName(user)를 h1 엘리먼트에 포함
</h1>
);
3. import / export 구문은 어떤 식으로 사용할 수 있나요?
파일 단위로 모듈화 시키는 부분들이다.
import React from "react"
export default App
Component와 Props
1. DOM을 처음 배울 때 페이지 단위로 작업하는 방법과 비교해서, 컴포넌트 단위로 개발할 때의 장점은 무엇인가요?
컴포넌트를 통하여 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있어서 재사용이라는 측면에서 용이하고, 조각 별로 구분하여 직관적으로 파악할 수 있다는 것이 장점이다.
2. 하나의 컴포넌트에서 여러 개의 엘리먼트를 리턴할 수도 있나요?
fragment를 통하여 가능하고 또한 단축 문법인 빈 태그로도 가능하다.
하나 fragment에 key가 존재한다면 react.fragment를 명시적으로 선언해야 한다.
3. <Tweet> 나의 새 트윗 </Tweet>이라는 컴포넌트 사용 방법이 있다고 가정할 때, 컴포넌트 내에서 나의 새 트윗이라는 문자열은 어떻게 접근할 수 있나요?
props.children 혹은 props인자에 {children}을 주게 된다면 props를 제외하고 children만 작성하여 접근할 수 있다.
4. props를 다룰 때에 지켜야 하는 엄격한 규칙이 하나 있습니다. 무엇인가요?
모든 react컴포넌트는 자신의 props를 다룰 때, 반드시 순수 함수처럼 동작해야 한다.
순수 함수란, 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하는 것이다.
5. 컴포넌트에서 배열의 개수만큼 엘리먼트를 렌더링 하고자 할 때, 어떤 방법으로 렌더링 할 수 있나요?
map() 함수를 통하여 렌더링을 할 수 있다.
6. 컴포넌트에서 배열의 개수만큼 엘리먼트를 렌더링 할 때에 발생하는 경고의 의미는 무엇이며, 어떻게 해결할 수 있나요?
map함수를 적용할 때에, key값을 넣어준다.
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li>{number}</li>
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
State
1. props와 state의 차이점은 무엇인가요?
props는 외부에서부터 전달받은 값이고, state는 내부에서 변하는 값이다.
2. 상태를 변경할 때 사용되는 this.setState는 어떻게 사용하나요?
컴포넌트 로컬 state를 업데이트하기 위해 this.setState()를 사용합니다.
컴포넌트에 있는 state객체에 대한 상태를 업데이트 실행합니다.
state가 변경되면, 컴포넌트는 리 렌더링(?)됩니다. <= 이 부분은 조금 더 살펴보는 것이 좋겠다.
2.1 직접 this.state를 할당하거나, this.state의 키값을 수정하면 안 되는 이유는 무엇인가요?
할당하거나 키 값을 수정하면 컴포넌트를 다시 렌더링 하지 않는다.
아래 코드 참조
// Wrong
this.state.comment = 'Hello';
// Correct
this.setState({comment: 'Hello'});
왜 꼭 this.setState를 사용해야만 할까요?
위에 코드 참조
this.state를 지정할 수 있는 유일한 공간은 바로 constructor이기 때문이다.
3. React에서 이벤트를 처리할 때에 HTML에서와 다른 특징은 무엇인가요?
아래의 코드처럼 형태에 대한 차이와 react는 DOM 엘리먼트가 생성된 후 리스너를 추가하기 위해 addEventListener를 호출할 필요가 없다.
// HTML
<button onclick="activateLasers()">
Activate Lasers
</button>
// React
<button onClick={activateLasers}>
Activate Lasers
</button>
4. 이벤트 처리 시, 이벤트 핸들러를 다음과 같이 this 바인딩을 해줘야 하는 이유가 무엇인가요?
// 공식 문서 참조
this.handleClick = this.handleClick.bind(this);
<button onClick={this.handleClick}>
JSX 콜백 안에서 this의 의미에 대해 주의해야 합니다.
JavaScript에서 클래스 메서드는 기본적으로 바인딩되어 있지 않습니다.
this.handleClick을 바인딩하지 않고 onClick에 전달하였다면, 함수가 실제 호출될 때 this는 undefined가 됩니다.
이는 React만의 특수한 동작이 아니며, JavaScript에서 함수가 작동하는 방식의 일부입니다.
일반적으로 onClick={this.handleClick}과 같이 뒤에 ()를 사용하지 않고 메서드를 참조할 경우, 해당 메서드를 바인딩해야 합니다.
CodeSandbox는 온라인 IDE입니다.
프로젝트를 만들 때 CodeSandbox는 공식적으로 제공하는 여러 가지 템플릿이 존재하며 이 환경에서 사용하고 싶은 라이브러리나 코드를 쉽게 테스트하고 온라인상에서 공유할 수 있다.
React든 Vanilla 환경이든 쉽게 시작할 수 있다.
🍒More Study
✅React Lifecycle
✅React로 영화 웹 서비스 만들어보기(클론 코딩)
'Daily > TIL(Today I Leared)' 카테고리의 다른 글
210326_TIL(Recast.ly 마무리, Lifting State Up) (0) | 2021.03.29 |
---|---|
210325_TIL(Lifecycle, Recast.ly) (0) | 2021.03.26 |
210323_TIL(Express, Refactor Express) (0) | 2021.03.24 |
210322_TIL(Chatterbox Server) (0) | 2021.03.23 |
210319_TIL(Mini node server) (0) | 2021.03.21 |