<div id="readability-page-1" class="page"><div><blockquote>
Velopert 선생님의 강의를 보고 만든것 입니다!
</blockquote>
<h3 id="보고-쓴-코드들">보고 쓴 코드들</h3>
<pre><code>import React from "react";

type GreetingsProps = {
 name: string;
 mark: string;
 optional?: string;
 onClick: (name: string) =&gt; void;
};

function Greetings({ name, mark, optional, onClick }: GreetingsProps) {
 const handleClick = () =&gt; onClick(name);
 return (
 &lt;div&gt;
 Hello, {name} {mark}
 {optional &amp;&amp; &lt;p&gt;{optional}&lt;/p&gt;}
 &lt;div&gt;
 &lt;button onClick={handleClick}&gt;Click Me&lt;/button&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 );
}

Greetings.defaultProps = {
 mark: "!",
};

export default Greetings;


import React from "react";
import Greetings from "./Greetings";

function App() {
 const onClick = (name: string) =&gt; {
 console.log(`${name} hello `);
 };
 return &lt;Greetings name="Hello" onClick={onClick} /&gt;;
}

export default App;</code></pre>
 
<h4 id="리액트-src디렉터리-초기-셋팅">리액트 src디렉터리 초기 셋팅</h4>
<img src="https://media.vlpt.us/images/jce1407/post/853fa1d5-b194-4e04-bd7c-b8f66abf8c1e/image.png">
<h4 id="usestate를-쓸때">useState를 쓸때</h4>
<blockquote>
useState에선 자동으로 타입을 알아내줘서 제네릭을 쓸필요가 없습니다, 
그러나 null인지 판별해야하는 상황에서는 아래처럼 유용하게 쓰일수있어요
</blockquote>
<pre><code>interface Information {
 name: string;
 description: string;
 }
 const [info, setInformation] = useState&lt;Information | null&gt;(null);</code></pre>
또 상태의 타입이 복잡한 배열이나 객체일때도 사용하는것이 좋습니다.
<pre><code>interface Todo {
 id: Number;
 text: String;
 done: Boolean;
 };
 const [todos, setTodos] = useState&lt;Todo[]&gt;([]); // 또는 const [todos, setTodos] = useState([] as Todos[]);</code></pre>
위의 주석에서 쓰인 <code>as</code>는 특정값이 어떤 타입이다를 명시할수있는 문법입니다!
<h4 id="usestate를-쓸때-2">useState를 쓸때 2</h4>
<blockquote>
이번에는 input창을 이용해 상태관리를 하는걸 해보았습니다.
<ul>
<li>useState를 써서 객체 상태 지정 / 분해할당으로 값 가져오기</li>
</ul>
</blockquote>
<pre><code>const [form, setForm] = useState({
 name: '',
 desc: ''
 });
const { name, desc } = form;</code></pre>
<blockquote>
<ul>
<li>onChange 함수를 써서 특정 이벤트 타입지정해주기</li>
</ul>
</blockquote>
<pre><code>const onChange = (e: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
 const {name, value } = e.target;
 setForm({
 ...form, [name]: value, 
 });
 };</code></pre>
<pre><code>const handleSubmit = (e: React.FormEvent&lt;HTMLFormElement&gt;) =&gt; {
 e.preventDefault();
 onSubmit(form);
 setForm({
 name: '',
 desc: '',
 }); // 초기화
 };</code></pre>
<h4 id="useref를-쓸때">useRef를 쓸때</h4>
<blockquote>
useRef는 리액트 컴포넌트에서 외부라이브러리의 인스턴스 또는 DOM을 특정 값에 담을때 써요. 
그리고 이것을 통해 컴포넌트 안의 값을 관리할때 유용해요, BUT 렌더링과 관계없어야함
</blockquote>
<pre><code>	const inputRef = useRef&lt;HTMLInputElement&gt;(null)</code></pre>
위와 같이 useRef 를 쓰고 뒤에 제네릭을 붙여야함 사용시에는 .current 를 써서 정해준 기본값에서 변화를 줄 수있습니다.
<h3 id="기억에-남는-것">기억에 남는 것</h3>
<blockquote>
<ul>
<li>React.FC는 쓰지말고 되도록이면 function 아니면 화살표 함수를 쓰자</li>
<li>특정 이벤트에 마우스 호버하면 그 이벤트 상세이름이 뜸</li>
<li>useReducer쓸때는 타입들을 모두 <code>|</code>를 써서 명시해줘야함</li>
<li>useRef를 쓸때는 제네릭으로 타입을 정해야함</li>
<li>useRef로 DOM을 관리할때는 초기값으로 null을 주고 null체킹도 해줘야함</li>
</ul>
</blockquote></div></div>

Clzzi.log

Clzzi

Velopert 선생님의 강의를 보고 만든것 입니다!
보고 쓴 코드들
import React from "react";
type GreetingsProps = {
 name: string;
 mark: string;
 optional?: string;
 onClick: (name: string) => void;
};
function Greetings({ name, mark, optional, onClick }: GreetingsProps) {
 const handleClick = () => onClick(name);
 return (
 <div>
 Hello, {name} {mark}
 {optional && {optional}}
 <div>
 <button onClick={handleClick}>Click Me</button>
 </div>
 </div>
 );
}
Greetings.defaultProps = {
 mark: "!",
};
export default Greetings;
import React from "react";
import Greetings from "./Greetings";
function App() {
 const onClick = (name: string) => {
 console.log(`${name} hello `);
 };
 return <Greetings name="Hello" onClick={onClick} />;
}
export default App;
리액트 src디렉터리 초기 셋팅
useState를 쓸때
useState에선 자동으로 타입을 알아내줘서 제네릭을 쓸필요가 없습니다,
그러나 null인지 판별해야하는 상황에서는 아래처럼 유용하게 쓰일수있어요
interface Information {
 name: string;
 description: string;
 }
 const [info, setInformation] = useState<Information | null>(null);
또 상태의 타입이 복잡한 배열이나 객체일때도 사용하는것이 좋습니다.
interface Todo {
 id: Number;
 text: String;
 done: Boolean;
 };
 const [todos, setTodos] = useState<Todo[]>([]); // 또는 const [todos, setTodos] = useState([] as Todos[]);
위의 주석에서 쓰인 as는 특정값이 어떤 타입이다를 명시할수있는 문법입니다!
useState를 쓸때 2
이번에는 input창을 이용해 상태관리를 하는걸 해보았습니다.
useState를 써서 객체 상태 지정 / 분해할당으로 값 가져오기
const [form, setForm] = useState({
 name: '',
 desc: ''
 });
const { name, desc } = form;
onChange 함수를 써서 특정 이벤트 타입지정해주기
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 const {name, value } = e.target;
 setForm({
 ...form, [name]: value, 
 });
 };
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
 e.preventDefault();
 onSubmit(form);
 setForm({
 name: '',
 desc: '',
 }); // 초기화
 };
useRef를 쓸때
useRef는 리액트 컴포넌트에서 외부라이브러리의 인스턴스 또는 DOM을 특정 값에 담을때 써요.
그리고 이것을 통해 컴포넌트 안의 값을 관리할때 유용해요, BUT 렌더링과 관계없어야함
 const inputRef = useRef<HTMLInputElement>(null)
위와 같이 useRef 를 쓰고 뒤에 제네릭을 붙여야함 사용시에는 .current 를 써서 정해준 기본값에서 변화를 줄 수있습니다.
기억에 남는 것
React.FC는 쓰지말고 되도록이면 function 아니면 화살표 함수를 쓰자
특정 이벤트에 마우스 호버하면 그 이벤트 상세이름이 뜸
useReducer쓸때는 타입들을 모두 |를 써서 명시해줘야함
useRef를 쓸때는 제네릭으로 타입을 정해야함
useRef로 DOM을 관리할때는 초기값으로 null을 주고 null체킹도 해줘야함

타입스크립트 찍먹해보기2

댓글