본문 바로가기

TIL61

리액트 프로젝트에서 타입스크립트 사용하기 출처 https://react.vlpt.us/using-typescript/ JavaScript 는 weakly typed 언어이기에, 특정 숫자 변수를 선언한 다음에 변수에 문자열을 넣을 수도 있고, null 을 넣을 수도 있고, 배열을 넣을 수도 있습니다. let value = 5; value = '안녕하세요'; value = [1,2,3,4,5]; value = null 추가적으로 자동완성도 우리가 Java / C# / C++ / Python 등의 언어를 사용 할 때처럼 제대로 되지 않습니다. (VSCode 를 사용하면 어느정도 되고 있다고 착각 할 수도 있는데 사실 TypeScript 관련 기능이 이미 기본적으로 돌아가고있어서 되는 거랍니다.) 만약에 TypeScript 를 사용하면, 이러한 불편.. 2022. 8. 2.
22. Context API를 사용한 전역 값 관리 출처 - 벨로퍼트 : https://react.vlpt.us/basic/22-context-dispatch.html Context API와 dispatch를 사용하면 3~4개 이상의 컴포넌트를 거쳐서 전달해야하는 복잡한 구조를 해결할 수 있다. const UserDispatch = React.createContext(null); createContext 의 파라미터에는 Context의 기본값을 설정할 수 있다. : Context를 쓸 때 따로 지정하지 않을 경우 사용되는 기본값 Context를 만들면, Context 안에 Provider라는 컴포넌트가 들어있는데 이 컴포넌트를 통하여 Context의 값을 정할 수 있다. 이 컴포넌트를 사용할 때 value 라는 값을 설정해주면 된다. ... 이렇게 설정해.. 2022. 7. 29.
20. useReducer를 사용하여 상태 업데이트 로직 분리하기 출처 - 벨로퍼트 : https://react.vlpt.us/basic/20-useReducer.html 공부를 다시 해야할 거 같음 ! reducer : 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수 function reducer(state, action) { // 새로운 상태를 만드는 로직 switch (action.type) { case 'INCREMENT' : return state + 1; case 'DECREMENT' : return state - 1; default : return state; } } state : 현재 상태 action : 업데이트를 위한 정보를 가지고 있다. 주로 type 값을 지닌 객체 형태로 사용 const [state, dispatch] .. 2022. 7. 28.
19. React.memo를 사용한 컴포넌트 리렌더링 방지 출처 - 벨로퍼트 https://react.vlpt.us/basic/19-React.memo.html React.memo : 컴포넌트의 props 가 바뀌지 않았다면, 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화 export default React.memo(UserList); 작성한 코드 기준으로 이야기해보자. 하지만, export한 컴포넌트를 React.memo로 감싸도 user의 이름을 클릭하면 user컴포넌트가 모두 리렌더링된다. 그 이유는 다음 코드에서 useCallback 함수에 users 가 디펜던시에 있기 때문에 users 값이 변경되었다 판단하여 렌더링을 하게된다. const onRemove = useCallback( id => { // user.id 가 파라미터로 일치하지 않는 .. 2022. 7. 26.
18. useCallback을 사용하여 함수 재사용하기 useCallback vs. useMemo useCallback : 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 useMemo : 특정 결과값을 재사용할 때 const onChange = useCallback( e => { const { name, value } = e.target; setInputs({ ...inputs, [name]: value }); }, [inputs] ) ❗ 함수안에서 사용하는 상태 혹은 props가 있다면 꼭, deps 배열 안에 포함시켜야 된다. 만약, deps 배열 안에 함수에서 사용하는 값을 넣지 않게된다면, 함수 내에서 해당 값들을 참조할 때 가장 최신값을 참조할 것이라 보장할 수 없다. props 로 받아온 함수가 있다면, 이 또한 deps 에 넣어주어야한다. 2022. 7. 23.
17. useMemo를 사용하여 연산한 값 재사용하기 useMemo Hook을 사용하여 연산된 값을 재사용 1) 첫번째 파라미터 : 어떻게 연산할 지 정의하는 함수 2) 두번째 파라미터 : deps 배열 이 배열 안의 내용이 바뀌면, 첫번째 파라미터에 등록한 함수를 호출해서 값을 연산해주고 만약에 바뀌지 않았다면 이전에 연산한 값을 재사용하게 된다. const count = useMemo(() => countActiveUsers(users), [users]); 2022. 7. 22.
16. useEffect를 사용하여 마운트/언마운트/업데이트 시 할 작업 설정하기 useEffect라는 Hook을 사용하여 컴포넌트가 마운트 됐을 때 (처음 나타났을 때) 언마운트됐을 때 (사라질 때) 업데이트 될 때 (특정 props가 바뀔 때) useEffect(() => { // 마운트 시 하는 작업을 작성 console.log('컴포넌트가 화면에 나타남'); return () => { // 언마운트 시 하는 작업을 작성 (업데이트 되기 바로 직전에 호출) console.log('컴포넌트가 화면에서 사라짐'); } }, []); useEffect 1) 첫번째 파라미터 : 함수 2) 두번째 파라미터 : 의존값이 들어있는 배열 (deps) - 만약 deps 배열을 비우게 된다면, 컴포넌트가 처음 나타날때에만 useEffect에 등록한 함수가 호출 마운트 시 하는 작업에 바뀌기전값이 .. 2022. 7. 21.
15. 배열 항목 수정하기 onToggle 함수를 선언 active 값에 따라 폰트의 색상 변경하는 것 구현 id값을 비교해서 id가 다르다면 그대로 두고, 같다면 active를 반전시키도록 구현 const onToggle = id => { setUsers( users.map(user => user.id === id ? { ...user, active: !user.active } : user ) ); }; App컴포넌트에서 구현하여 UserList에 넘김 → UserList에서 전달받아 → User 컴포넌트에 전달 2022. 7. 19.
14. 배열에 항목 제거하기 filter 내장 함수()를 사용하여 제거할 id값을 가진 객체를 제외한 배열을 새로 만들어준다. (2022.07.05 - [TIL/Javascript] - 배열)를 사용하여 제거할 id값을 가진 객체를 제외한 배열을 새로 만들어준다. onRemove 함수를 선언 : App컴포넌트에서 구현하여 UserList에 넘김 → UserList에서 전달받아 → User 컴포넌트에 전달 2022. 7. 19.
spread 문법 객체 혹은 배열을 펼침 const slime = { name: '슬라임' }; const cuteSlime = { name: '슬라임', attribute: 'cute' }; const purpleCuteSlime = { name: '슬라임', attribute: 'cute', color: 'purple' }; console.log(slime); console.log(cuteSlime); console.log(purpleCuteSlime); 위의 것을 다음과 같이 바꿀 수 있다. const slime = { name: '슬라임' }; const cuteSlime = { ...slime, attribute: 'cute' }; const purpleCuteSlime = { ...cuteSlime, color.. 2022. 7. 18.
ajax ajax 통신이란? 서버와 클라이언트간에 정보를 비동기적으로 전달하기 위해 자바스크립트에서 사용하는 하나의 라이브러리 서버에 css 파일을 요청하고 그 응답 결과를 text에 저장하여 alert(text)를 수행한다. 2022. 7. 18.
프로토타입 : javascript는 클래스라는 개념이 없어 기존의 객체를 복사하여 새로운 객체를 생성하는 프로토타입 기반의 언어 상속을 흉내내어 구현 Person.prototype이라는 빈 Object가 어딘가에 존재하고, Person 함수로부터 생성된 객체(kim, park)들은 어딘가에 존재하는 Object에 들어있는 값을 모두 갖다쓸 수 있습니다. 즉, eyes와 nose를 어딘가에 있는 빈 공간에 넣어놓고 kim과 park이 공유해서 사용 function Person() {} Person.prototype.eyes = 2; Person.prototype.nose = 1; var kim = new Person(); var park = new Person(): console.log(kim.eyes); // =>.. 2022. 7. 16.
반응형

티스토리툴바