자기계발 캠퍼스

예전에도 다뤘지만 코딩은 손에 익을 때까지 반복하는 것이 쵝오 리액트 컴포넌트에 스타일을 입히는 2가지 방식에 대해 살펴보려 한다 1. style이라는 props에 직접 css 코드를 다 입력해준다. 이런 식으로 작성하는 방식이다. 가장 중요한 점은 역시 style뒤에 중괄호가 2개가 들어가야 한다. style 이라는 props안에 자바스크립트 코드를 넣어주기 위한 중괄호 하나 css를 표현할 때 object형식으로 표현하기 때문에 (ex) { border: 1px solid black; padding: 10px; } 중괄호 하나 더 중괄호 2개로 감싸줘야한다. style 안에서도 역시 삼항연산자 쌉가능 조건에 따라 색깔을 내 맘대로 바꿔줄 수 있다. isValid === false 일 때는 아래와 같은..

리액트를 활용할 때 삼항연산자는 정말 많이 쓰인다. 삼항연산자를 모르면 여기로 가서 보고 오시길 {조건 ? 맞을 때 : 틀릴 때} 이렇게 사용된다. Boolean 타입의 조건이 무조건 앞에 오고 그 다음에 ?를 붙여주고 조건이 true일 때 실행할 코드가 앞에 조건이 false일 때 실행할 코드가 뒤에 온다. 간단한 예시들은 언제나 쉽다. 하지만 역시나 얘도 코드가 길어질 때 가독성이 떨어진다. 조건이 맞을 때 No expeneses Found. 조건이 틀릴 때 filteredItems.map((expense) => { return ( ); } 이렇게 실행한다고 하면 어떨까? jsx에서 삼항연산자는 중괄호 {}를 사용해서 사용하는 경우가 많은데 이 중괄호의 끝이 어딘지 헷갈리게 되어 어디까지가 연산문인지..

React의 최대 장점은 컴포넌트로 잘개 쪼개어 조작이 편하다는 것이다. 그런데 생각해보니깐 컴포넌트끼리도 겹치는 것들이 많다. HTML이 될수도 있고 CSS 스타일이 겹치는 게 있을 수도 있다. 이를 더 편하게 다루고자 하는 것이 바로 composition 한국말로 '상속'이다. 일단 단적으로 예시를 보자. 다른 두 개의 컴포넌트가 모두 Card라는 태그로 감싸져있다. 일단 여기서 의문점 로 시작 안했는데 에러가 안 나오네? 이제 Card 컴포넌트가 어떤 특성을 가지고 있는지 살펴보자. Card는 props를 받아서 div 안에 {props.children}을 해준다. 이 구조로 다른 컴포넌트들로 넘어가기 때문에 다른 컴포넌트들은 사실상 로 시작하는 HTML을 리턴하는 것이나 마찬가지이다. 꼭 prop..

npx create-react-app을 한 후에 components 폴더를 만들어서 내가 원하는 이름의 js 파일을 만들어준다. 컴포넌트라는 말이 리액트에서 뭔가 있어보이기도 하는데 그냥 자바스크립트에서 하나의 함수에 불과하다고 생각하면 된다. 소비지출을 만드는 항목을 만들기 위해 ExpenseItem.js라는 컴포넌트를 만들어준다. 이 안에는 날짜와 항목 그리고 가격을 나타내는 div를 만들어준다. 잘 보면 ExpenseItem 뒤에 date, title, amount라는 항목이 있다. 어 저기는 arguments가 들어가는 자리인데? 맞다. 리액트에서는 props라는 이름으로 arguments 자리에 들어가는 녀석들이 있다. 이름은 내 맘대로 짓고 컴포넌트를 사용할 때 data, title, amou..

Next JS에서 next.config.js 파일을 조작하는 법 중 Redirects와 Rewrites를 알아보자. Next App 에서 next.config.js 파일을 가서 본다. 처음에는 reactStrictMode: true만 있을 텐데 아래와 같이 redirects함수를 async로 선언한다. source : '입력주소' destination : 'source 주소 입력하면 이동할 주소' premanet : true/false 캐싱 여부 source 주소 입력 -> destination 주소 이런 구조다. 서버를 실행하고 localhost:3000/hello를 입력하고 엔터를 누르면 이렇게 짠하고 /hello가 아닌 /bye로 향하게 된다. 이게 redirects다. source에 따라 원하는 ..

리액트 프레임워크인 Next를 시작해보자. 역시 시작은 공식 docs를 보는 게 국룰 create-react-app를 하는 것처럼 시작한다. 다만 뒤에 @latest를 붙여주는 걸 까먹지 말자. 이왕이면 최신 버전 쓰는게 좋으니깐ㅎㅎ 설치가 완료되면 npm run dev를 하고 우리의 베프인 localhost:3000으로 가서 열리는지 확인한다. pages/index.js를 열심히 수정해서 원하는 웹사이트를 만들면 된다. 이 app은 '/' route를 시작할 때 index.js 파일을 불러온다. 이제 VSCode를 켜보자. 파일들이 정말 많다. package를 확인해보면 react와 react-dom은 물론이거니와 next가 깔려있다. 이제 페이지를 만들러 가보자. pages 폴더에 가서 원하는 파일명..

useState를 배웠으니 useEffect라는 훅을 살펴보자. useState를 활용하면 setState를 계속해서 해주고 state 값을 계속해서 리-렌더링해주게 된다. 하지만 예를 들어 날씨나 교통상황과 같은 데이터를 받을 때 useState를 활용하면 setState가 실행될 때마다 계속해서 데이터를 받아와야하는 고생을 해야한다. 이를 방지하고자 하는 것이 바로 useEffect라는 훅이다. (리액트 공식 홈페이지 링크 걸어놓음) counter와 keyword의 두 개의 state를 활용하여 useEffect를 살펴보자. useEffect의 문법은 이렇다 useEffect(실행할 내용, 변수) 실행할 내용은 위와 같은 console.log나 어떤 함수의 내용이나 아무거나 상관없다. 뒤에 나오는 변..

Btn을 만드는 함수를 선언했고 text와 onClick을 props로 받아오고 있다. 그리고 렌더링한 text를 콘솔에 출력하는 코드를 숨겨놓았다. 훅을 사용하여 value를 다루는 state를 선언하고 Btn이 클릭될 때마다 state를 변경할 수 있게 했다. 버튼을 클릭하면 Btn 두개가 리-렌더링이 되어 콘솔에 두개씩 뜬다. 2번째 버튼은 text값이 변하지 않음에도 렌더링이 또 되는 것이다. 이를 막고자 React에는 memo라는 기능이 있다. memoizing의 약자로 렌더링의 결과가 이전 렌더링의 결과와 같을 때 리-렌더링을 하지 않는 것이다. 아래 예시를 보자. Btn 컴포넌트를 memo해주고 MemorizedBtn을 선언해준다. 그리고 Btn 태그 대신 MemorizedBtn 태그를 대신..

React의 JSX를 복습하는 차원에서 간단한 title과 Button을 만들었다. 그리고 Container에 담아 title과 Button component를 썼는데... 잉...? 왜 색깔이 다르지...? 분명 Button은 component로 작동한 거 같은데...title에 뭐가 문제지...? 그냥 render를 시켰는데 당연히 에러가 떴다. 이유는 너무나 간단하게도 대소문자 소문자로 title을 적으면 그냥 html 태그로 읽어버리고 React에서 component로 활용하기 위해서는 무조건 첫 글자가 대문자여야한다. React 강의 들으면서 배울 때는 배운 그대로 응용하면 코드가 다 잘 되서 뭐가 문제지 싶었는데 이런 디테일을 놓치고 있었다니... 그래서 대문자로 바꿔놓으니 같은 색깔 너무 푸..

First Name, Last Name, Email에 값을 입력하면 왼쪽과 같이 표시될 수 있게 만드는 연습입니다. 1. 각 input 별로 value를 따로따로 조작 2. input에 입력된 value를 실시간으로 화면으로 출력 input에 변화가 일어날 때마다 handleOnchange라는 함수를 호출해줄 거고 각 input 별로 name을 붙입니다. contact이라는 변수값을 const로 선언하고 fName, lName, email의 키 값을 선언해주었습니다. handleOnchange는 onChange라는 이벤트가 발생하는 타겟의 name과 value를 받아서 setContact를 실행해줍니다. 이 때 기존에 contact에 들어있는 값을 prevContact로 받아서 그 위에 [name] : ..