종합퀴즈
- React State & Props에 대한 이해도를 퀴즈를 통해 점검한다.
o
야간 자율 학습
-
React Twittler State & Props 과제 레퍼런스의 의사코드를 작성하여 블로깅 한다.
o
[출처 CodeState UR Class 자료]
-
먼저 파일 구조를 파악한 후, 각 파일이 어떤 역할을 하는지 부터 파악한다.
이번 과제였던 React Twittler State Props 파일에는
다음과 같은 파일 구조를 가졌다.
/
/public # create-react-app이 만들어낸 폴더로 npm start로 실행할 때 사용된다.
index.html 파일이 들어있다.
/src 👉 React 컴포넌트가 들어가는 폴더
./Components 👉 단일 (자식) 컴포넌트가 들어가는 폴더
./Tweet.css 👉 Tweet 페이지 컴포넌트의 스타일을 정의하는 CSS 파일
./Tweet.js 👉 Tweet 페이지를 구성하는 (부모) 컴포넌트로
해당 페이지의 내용을 렌더링하고, 필요한 로직과 상태를 관리할 수 있다.
./Pages 👉 3가지의 페이지를 표시하는 컴포넌트가 들어가는 폴더
./About.css 👉 About 페이지 컴포넌트의 스타일을 정의하는 CSS 파일
./About.js 👉 About 페이지를 구성하는 컴포넌트가 들어가는 파일로
해당 페이지의 내용을 렌더링하고, 필요한 로직과 상태를 관리할 수 있다.
./Mypage.css 👉 Mypage 페이지 컴포넌트의 스타일을 정의하는 CSS 파일
./Mypage.js 👉 Mypage 페이지를 구성하는 컴포넌트가 들어가는 파일로
해당 페이지의 내용을 렌더링하고, 필요한 로직과 상태를 관리할 수 있다.
./Tweets.css 👉 Tweets 페이지 컴포넌트의 스타일을 정의하는 CSS 파일
./Tweets.js 👉 Tweets 페이지를 구성하는 (부모) 컴포넌트로
해당 페이지의 내용을 렌더링하고, 필요한 로직과 상태를 관리할 수 있다.
./static 👉 dummyData가 들어가는 폴더
./dummyData.js 👉 하드 코딩된 가짜 데이터를 사용하여
실제 백엔드 서버나 외부 API와의 통신 없이도
애플리케이션을 개발하고 테스트할 수 있으며,
데이터를 동적으로 처리하는 로직을 구현하기 위한 파일.
./App.css 👉 App 전체의 스타일을 정의하는 CSS 파일
./App.js 👉 App의 구조를 정의하고 상태와 속성을 관리할 수 있는 파일로
App의 진입점이 되는 컴포넌트가 들어가는 파일
./Footer.js 👉 App 하단에 표시되는 컴포넌트가 들어가는 파일로
주로 저작권 정보나 연락처와 같은 정보를 표시한다.
./global-style.css 👉 HTML 문서의 최상위 요소를 나타내는 :root에
CSS에서 사용되는 전역 스타일을 정의하는 파일
./index.js 👉 App을 실제로 렌더링하는 파일로
React DOM의 'render'함수를 사용하여,
App 컴포넌트를 지정된 HTML 요소(여기서는 'root')에 렌더링한다.
./Sidebar.js 👉 App의 사이드바를 표시하는 컴포넌트가 들어가는 파일로
주로 내비게이션 링크나 추가 정보를 제공하는 역할을 한다.
package.json 👉 해당 npm 모듈을 활용하기 위한 정보가 담긴 파일로
해당 프로젝트 전반에 관한 정보가 있다.
.gitignore 👉 Git 저장소에 포함되지 않아야 하는 파일 및 폴더를 지정하는 파일로
주로 빌드된 파일, 패키지 의존성 폴더 등을 제외하기 위해 사용한다.
README.md 👉 해당 프로젝트에 관한 소개글이 들어가는 파일- 코드를 작성하기 전에 각 폴더 및 파일에 적을 의사코드를 작성한다.
이는 코드를 작성하기 전에 의사코드를 작성하여 의도한 대로
코드가 작성될 수 있도록 한다.리액트는 컴포넌트 기반의 특성을 가지므로 컴포넌트를 먼저 완성시키고,
레이아웃에 따라 유동적으로 컴포넌트의 위치를 변경할 수 있도록
아래에서 위로 상향식(bottom-up)방식으로 작성한다.
뿐만 아니라 이는 관심사 분리 목적이기도 하다.참고로 데이터 흐름은 부모 컴포넌트에서 전달 받기 때문에
위에서 아래로 하향식(top-down)로 데이터가 전달되고,
이는 단방향 데이터 흐름(One-way data flow)이라고 한다.풀면서 이해가 잘 되는 부분은 ⭐️,
쓰고 지워가며 정답을 유추했거나 헷갈렸던 부분은 ⭐️⭐️,
잘 이해되지 않아 헤맸던 부분은 ⭐️⭐️⭐️로 표시했다.
[Tweet.js] ⭐️⭐️
- <react 라이브러리>에서 React 객체를 사용하여
React 컴포넌트를 작성하고, 렌더링하기 위해 <import>로 가져온다.
- Tweet 컴포넌트 전체의 스타일을 정의하는 CSS 파일을 가져오려면,
현재 파일과 동일한 폴더에 위치한 Tweet.css 파일을 (=./Tweet.css)
<import>로 가져온다.
-
● 한 개의 트윗을 나타내기 위해 <"tweet"이라는 객체를 props로 받는>
<Tweet 함수형 컴포넌트>를 작성한다.
● 이때, 트윗이 작성된 날짜가 한국 시간대("ko-kr")로 변환될 수 있도록
new Date()를 사용하여 변수에 할당한다.
● 단일 컴포넌트인 Tweet에 나타낼 속성들을 작성하고,
리액트의 JSX 문법인 <className>으로 해당 컴포넌트들의 스타일을 작성한다.
● 이때, 트윗 프로필 이미지, 트윗 작성자 이름, 트윗 작성일, 트윗 내용을 나타내도록 작성한다.
- 해당 파일에서 정의한 App 컴포넌트를 다른 파일에서 가져가 사용할 수 있도록
<export default>를 사용하여 내보낸다.
---------------------------------------------------------------------
[About.js] ⭐️
- <react 라이브러리>에서 React 객체를 사용하여
React 컴포넌트를 작성하고, 렌더링하기 위해 <import>로 가져온다.
- <Footer 컴포넌트>를 현재 파일로 가져오기 위해
현재 파일의 상위 폴더에 있는 Footer.js 파일을 (=../Footer)
<import>로 가져오고, 가져온 컴포넌트는 JSX 코드 내에서
<Footer />로 작성하여 사용할 수 있다.
- About 컴포넌트 전체의 스타일을 정의하는 CSS 파일을 가져오려면,
현재 파일과 동일한 폴더에 위치한 About.css 파일을 (=./About.css)
<import>로 가져온다.
-
● About 영역을 나타내기 위해 props를 전달인자로 받는
<About 함수형 컴포넌트>를 정의한다.
● 리액트의 JSX 문법인 <className>으로 해당 컴포넌트의 스타일을 작성한다.
● "React Twittler Info"가 위에 표시되고,
사용자의 페이지 소개를 적을 공간에 "나만의 Twittler 소개페이지를 꾸며보세요."가
표시되도록 <p>태그를 사용한다.
● 이때, 링크 내부에 About 페이지를 표시하기 위한 아이콘을 표시하기 위해
<i> 태그를 사용한다. --> Font Awesome을 이용
● 가져온 컴포넌트는 JSX 코드 내에서 사용할 수 있도록 <Footer />로 작성한다.
- 해당 파일에서 정의한 App 컴포넌트를 다른 파일에서 가져가 사용할 수 있도록
<export default>를 사용하여 내보낸다.
---------------------------------------------------------------------
[Mypage.js] ⭐️⭐️
- <react 라이브러리>에서 React 객체를 사용하여
React 컴포넌트를 작성하고, 렌더링하기 위해 <import>로 가져온다.
- <Footer 컴포넌트>를 현재 파일로 가져오기 위해
현재 파일의 상위 폴더에 있는 Footer.js 파일을 (=../Footer)
<import>로 가져오고, 가져온 컴포넌트는 JSX 코드 내에서
<Footer />로 작성하여 사용할 수 있다.
- <Tweet 컴포넌트>를 현재 파일로 가져오기 위해
현재 파일의 상위 폴더인 Components에 있는 Tweet.js 파일을
(=../Components/Tweet) <import>로 가져오고,
가져온 컴포넌트는 JSX 코드 내에서 <Tweet />로 작성하여 사용할 수 있다.
- Mypage 컴포넌트 전체의 스타일을 정의하는 CSS 파일을 가져오려면,
현재 파일과 동일한 폴더에 위치한 Mypage.css 파일을 (=./Mypage.css)
<import>로 가져온다.
- dummyTweets 변수를 현재 파일로 가져오기 위해
현재 파일의 상위 폴더인 static에 있는 dummyData.js 파일을
(=../static/dummyData) <import>로 가져오고,
가져온 변수는 JSX 코드 내에서
filter로 트윗 객체를 필터링 되도록 사용할 수 있다.
-
● 현재 사용자(parkhacker)의 정보와 트윗을 보여주기 위한
<Mypage 함수형 컴포넌트>를 작성한다.
● 가져온 dummyTweets 배열에서 <filter 메서드>를 사용하여
현재 사용자(parkhacker)의 트윗만 필터링하여 변수에 저장한다.
● 리액트의 JSX 문법인 <className>으로 해당 컴포넌트의 스타일을 작성한다.
● 필터링한 변수에서 현재 사용자(parkhacker)의
트윗 프로필 이미지, 트윗 작성자 이름, 트윗 내용만 보여주도록 작성한다.
● 필터링한 변수의 첫 번째 배열 요소인 현재 사용자(parkhacker)의
트윗을 <Tweet> 컴포넌트에 전달하여 렌더링하도록 JSX 코드 내에 작성한다.
● 가져온 컴포넌트는 JSX 코드 내에서 사용할 수 있도록 <Footer />로 작성한다.
- 해당 파일에서 정의한 App 컴포넌트를 다른 파일에서 가져가 사용할 수 있도록
<export default>를 사용하여 내보낸다.
---------------------------------------------------------------------
[Tweets.js] ⭐️⭐️⭐️
- <react 라이브러리>에서 상태를 관리할 수 있는 useState를 사용하고,
React 객체를 사용하여 React 컴포넌트를 작성하고, 렌더링하기 위해 <import>로 가져온다.
- <Footer 컴포넌트>를 현재 파일로 가져오기 위해
현재 파일의 상위 폴더에 있는 Footer.js 파일을 (=../Footer)
<import>로 가져오고, 가져온 컴포넌트는 JSX 코드 내에서
<Footer />로 작성하여 사용할 수 있다.
- <Tweet 컴포넌트>를 현재 파일로 가져오기 위해
현재 파일의 상위 폴더인 Components에 있는 Tweet.js 파일을
(=../Components/Tweet) <import>로 가져오고,
가져온 컴포넌트는 JSX 코드 내에서 <Tweet />로 작성하여 사용할 수 있다.
- Tweets 컴포넌트 전체의 스타일을 정의하는 CSS 파일을 가져오려면,
현재 파일과 동일한 폴더에 위치한 Tweets.css 파일 (=./Tweets.css)
<import>로 가져온다.
- dummyTweets 변수를 현재 파일로 가져오기 위해
현재 파일의 상위 폴더인 static에 있는 dummyData.js 파일을
(=../static/dummyData) <import>로 가져온다.
-
● useState를 사용하여 상태를 관리하는 <Tweets 컴포넌트>를 작성한다.
● 새로운 트윗을 작성하고 전송하며,
초기값이 parkhacker인 트윗 작성자 이름, 초기값이 빈 문자열인 트윗 내용,
초기값이 dummyTweets인 트윗 모음, 트윗 총 개수를 나타낼 수 있도록 <useState>를 작성한다.
● Tweet 버튼을 누르면, 작성된 트윗이 전송 되도록 <handleButtonClick 함수>를 작성한다.
● 트윗 작성자 이름 입력 필드가 변경되면, 작동하는 <handleChangeUser 함수>를 작성한다.
● 트윗 내용 입력 필드가 변경되면, 작동하는 <handleChangeMsg 함수>를 작성한다.
● <React.Fragment>로 감싸진 Tweets 컴포넌트의 렌더링 결과(return문)를 작성한다.
* React 컴포넌트는 일반적으로 하나의 최상위 요소로 감싸져야 한다.
그러나 여러 개의 요소를 반환해야 할 때가 있을 수 있다.
이때, <React.Fragment>를 사용하면, 부모 요소로 감싸지 않고
여러 개의 자식 요소를 그룹화하여 반환할 수 있다.
● 리액트의 JSX 문법인 <className>으로 해당 컴포넌트의 스타일을 작성한다.
● 트윗 작성자 이름을 입력할 수 있는 <input>과 트윗 내용을 작성할 수 있는 <textarea> 엘리먼트를 작성한다. 이때, 참조할 값으로 username과 content 상태 변수를 바인딩하고, 이벤트 함수를 작성한다.
● 트윗 총 개수를 보여줄 <Counter>를 작성한다.
● 작성한 트윗을 전송할 수 있는 <button 엘리먼트>를 작성한다.
● tweets 배열에 저장된 각 트윗을 나타내는 컴포넌트를 렌더링하기 위해 <map 메서드>를 사용하고, <Tweet> 컴포넌트에 전달하여 dummyTweets 개수에 맞게 렌더링하도록 JSX 코드 내에 작성한다.
● 가져온 컴포넌트는 JSX 코드 내에서 사용할 수 있도록 <Footer />로 작성한다.
- 해당 파일에서 정의한 App 컴포넌트를 다른 파일에서 가져가 사용할 수 있도록
<export default>를 사용하여 내보낸다.
---------------------------------------------------------------------
[App.js] ⭐️
- <react 라이브러리>에서 React 객체를 사용하여
React 컴포넌트를 작성하고, 렌더링하기 위해 <import>로 가져온다.
- App 컴포넌트 전체의 스타일을 정의하는 CSS 파일을 가져오려면,
현재 파일과 동일한 폴더에 위치한 App.css 파일을 (=./App.css)
<import>로 가져온다.
- 전역 스타일을 정의하는 CSS 파일을 가져오려면,
현재 파일과 동일한 폴더에 위치한 global-style.css 파일을
(=./global-style.css) <import>로 가져온다.
- <React Router DOM>을 설치한다.
- 설치 후, <react-router-dom 모듈>에서
{BrowserRouter, Routes, Route} 컴포넌트를 <import>로 가져온다.
* BrowserRouter : React Router의 라우터 컴포넌트로
History API를 사용해 페이지를 새로고침하지 않고도
주소를 변경할 수 있게 애플리케이션의 브라우저 히스토리를 관리하고,
현재 URL에 기반하여 적절한 컴포넌트를 렌더링한다.
이때, 최상위에 작성되어야 React Router 컴포넌트를 사용할 수 있다.
* Routes : 라우팅(경로 매칭)을 정의하는 컴포넌트로 <Routes> 컴포넌트 내에서
<Route> 컴포넌트를 사용하여 경로가 일치하는
단 하나의 라우터만 렌더링해주는 컴포넌트를 지정할 수 있다.
이때, Routes를 사용하지 않으면, 매칭되는 모든 요소를 렌더링한다.
* Route : 특정 경로에 대한 렌더링 규칙을 정의하는 컴포넌트로
<path> 속성으로 경로를 지정하고,
<element> 속성으로 해당 경로에 렌더링할 컴포넌트를 지정할 수 있다.
이때, <Link> 컴포넌트가 정해준 URL과 일치하는 경우에만 작동한다.
만약 지정되지 않은 주소로 접근하려면, path ="*"를 사용한다.
이는 이 속성이 사용된 컴포넌트를 보여준다.
- 애플리케이션의 네비게이션 또는 메뉴를 담당하는 <Sidebar 컴포넌트>를 가져오려면,
현재 파일과 동일한 폴더에 위치한 Sidebar.js 파일을 (=./Sidebar)
<import>로 가져온다.
- 애플리케이션에서 트윗 관련 내용을 표시하는 <"Tweets" 페이지 컴포넌트>를 가져오려면,
Pages 폴더에 위치한 Tweets.js 파일을 (=./Pages/Tweets)
<import>로 가져온다.
- 애플리케이션에서 사용자 개인 페이지를 표시하는 <"MyPage" 페이지 컴포넌트>를 가져오려면,
Pages 폴더에 위치한 MyPage.js 파일을 (=./Pages/MyPage)
<import>로 가져온다.
- 애플리케이션에 대한 정보나 사용자 개인 페이지에 대한 설명을 제공하는
페이지를 표시하는 <"MyPage" 페이지 컴포넌트>를 가져오려면,
Pages 폴더에 위치한 About.js 파일을 (=./Pages/About)
<import>로 가져온다.
-
● 페이지 레이아웃과 라우팅 설정을 하기 위해
props를 전달인자로 받은 <App 함수형 컴포넌트>를 정의한다.
● 리액트의 JSX 문법인 <className>으로 해당 컴포넌트의 스타일을 작성한다.
● 애플리케이션의 주요 콘텐츠를 담을 <main> 태그를 사용한다.
● App 컴포넌트의 주요 콘텐츠 영역에 표시하기 위해 <Sidebar 컴포넌트>를 작성한다.
● Sidebar의 3가지 페이지(tweets,mypage,about)를 렌더링하기 위해
렌더링할 컴포넌트에 <path> 속성과 <element> 속성을 사용하여 경로를 지정한다.
● 이때, 최상위에 <BrowserRouter />로,
<Route/>위에 <Routes/>으로 감싸져야 작동한다.
- 해당 파일에서 정의한 App 컴포넌트를 다른 파일에서 가져가 사용할 수 있도록
<export default>를 사용하여 내보낸다.
---------------------------------------------------------------------
[Footer.js] ⭐️
- <react 라이브러리>에서 React 객체를 사용하여
React 컴포넌트를 작성하고, 렌더링하기 위해 <import>로 가져온다.
- 하단에 저작권 정보를 렌더링하기 위해 html의 시멘틱 요소인 <footer>가 포함되도록
<Footer라는 이름의 함수형 컴포넌트>를 정의한다.
- 해당 파일에서 정의한 Footer 컴포넌트를 다른 파일에서 가져가 사용할 수 있도록
<export default>를 사용하여 내보낸다.
---------------------------------------------------------------------
[index.js] ⭐️
- <react 라이브러리>에서 React 객체를 사용하여
React 컴포넌트를 작성하고, 렌더링하기 위해 <import>로 가져온다.
- <react-dom 라이브러리>에서 <ReactDOM 객체>를 사용하여
가상 DOM을 실제 DOM으로 렌더링하기 위해 <import>로 가져온다.
- 애플리케이션의 최상의 컴포넌트인 <App 컴포넌트>를 가져오려면,
현재 파일과 동일한 폴더에 위치한 App.js 파일에서 (=./App)
<App 컴포넌트>를 <import>로 가져온다.
- 하드 코딩된 가짜 데이터를 사용하기 위해 static 폴더에 있는
dummyData.js 파일에서 (=./static/dummyData)
<dummyTweets 데이터>를 <import>로 가져온다.
-
● React 애플리케이션을 지정된 HTML 요소에 렌더링하기 위한
<ReactDOM.render() 함수>를 정의한다.
● 이떄, 첫 번째 매개변수는 <렌더링할 React 컴포넌트>를 받고,
두 번째 매개변수는 <해당 요소가 렌더링될 실제 HTML DOM 요소>를 받아온다.
* 여기서 <App dummyTweets={dummyTweets} />는
App 컴포넌트를 JSX 문법으로 사용하여 작성한 것이다.
JSX 문법에서 <App />는 App 컴포넌트의 인스턴스를 생성하겠다는 의미고,
dummyTweets는 App 컴포넌트에 dummyTweets라는 이름으로
전달되는 props를 의미한다. 이를 통해 App 컴포넌트 내에서
dummyTweets 변수를 사용할 수 있다.
* 여기서 document.getElementById('root')는
public 폴더에 위치한 HTML 문서 내에서 id가 root인 요소를 찾는 역할을 한다.
따라서 ReactDOM.render() 함수는 이 요소에 App 컴포넌트를 렌더링하겠다는 의미다.
---------------------------------------------------------------------
[Sidebar.js] ⭐️
- <react 라이브러리>에서 React 객체를 사용하여
React 컴포넌트를 작성하고, 렌더링하기 위해 <import>로 가져온다.
- 애플리케이션 내에서 페이지 이동을 하려면, <react-router-dom 모듈>에서
페이지 간의 링크를 생성하기 위한 <Link>라는 개별 객체를 가져와야 하므로
중괄호{}를 사용하여 <import>로 가져온다.
-
● Sidebar 영역을 나타내기 위해 <Sidebar 함수형 컴포넌트>를 정의한다.
● 리액트의 JSX 문법인 <className>으로 해당 컴포넌트의 스타일을 작성한다.
● <Link 컴포넌트>를 작성한 다음, <to 속성>을 사용하여 경로 간의 링크를 작성한다.
● 이때, 링크 내부에 각 페이지를 표시하기 위한 아이콘을 표시하기 위해
<i> 태그를 사용한다.
- 해당 파일에서 정의한 Sidebar 컴포넌트를 다른 파일에서 가져가 사용할 수 있도록
<export default>를 사용하여 내보낸다.
소감
🔡➡️💻➡️🤓👍
어제 자기 전에 이번 유닛의 종합퀴즈를 풀었다.
9문제 중에 4문제를 틀려서 오늘은 유닛 강의 자료를 다시 보고,
실습들을 자세하게 하나씩 해보며, 종합퀴즈를 다시 풀고,
오답을 정리하는 시간을 가졌다.
종합퀴즈 3개 이상 틀려서 야자반 대상자가 되었다.
야자반 과제는 이번 과제였던 Twittler state & props 레퍼런스를
참조해 작성한 의사 코드를 작성하여 제출하는 것이었다.
의사 코드를 하나 하나 작성하다보니 시간이 생각보다 오래 걸렸다.
그러나 자세하게 하나씩 뜯어보면서 코드를 보고, 의사 코드를 작성하니
보다 확실하게 이해가 되었다.
내가 이해한 거를 정리하다보니 글이 길어져서 가독성은 좋지 않을지라도
내가 이해한 게 중요하니깐 글을 쪼개지 않고 한 페이지에 다 담았다.
이렇게 하니깐 확실히 어제보다 학습 내용이 더 진하게 남은 것 같다.
기록으로 매일 남기는 게 면접을 위해서도 좋지만,
인간은 기록하지 않으면, 기억하지 못하니깐
나를 위해 블로깅 꾸준하게 하자! 👏
developerpyk