Timeline

! 공식문서를 참고해서 개념을 다시 한번 확인해주세요 ! 아직 정리 중인 개념입니다 1. async/await이란? async는 비동기라는 의미로 async는 함수안에 비동기적으로 실행 될 부분이 있다는것을 의미합니다 useEffect(() => { (async () => { const res = await fetch( `api 주소` ); const data = await res.json(); })(); }, []); 함수안에 비동기적으로 실행 될 부분은 await 붙어 있는 코드입니다. await은 무엇으로 부터 기다리다라는 뜻을 가지고 있습니다. await은 그 뒤에코드를 실행하고, 그코드가 리턴하는 객체를 기다려 줍니다. 그리고 객체가 fullfiield 상태가 되면 그 작업 성공 결과를 추출해서..

클릭 시 보여주는 메뉴를 구현했습니다 실제 구현 화면은 아래와 같고 이전 포스팅인 검색 기능 구현하기의 연장선입니다 JSX 부분 // 버튼 클릭 시 메뉴가 보이도록 하기 위해 onClick에 함수를 지정했습니다 {onClick ? ( //MENU_DATA안에 있는 메뉴리스트를 map함수를 이용해 구현했습니다 {MENU_DATA.map(list => ( {list.menu} ))} ) : null} js 문법 부분 // 버튼의 클릭을 감지하는 state를 만들었습니다 const [onClick, setOnClick] = useState(false); // 함수 안의 setOnClick 함수를 이용해 버튼 클릭 시 이전 상태를 바탕으로 동작하게 했습니다 const onClickMenu = () => { se..

인스타그램의 메뉴바를 클론 코딩했습니다 완성된 js 파일은 게시물 하단에서 확인하세요 아래 파일을 통해 구현한 메뉴바의 모습입니다 JSX 부분 // 검색창 왼쪽 로고 부분 westagram // 검색창 부분 // keyword를 입력하지 않으면 검색결과가 나오는 창이 보이지 않도록 했습니다 {keyword.length > 0 && ( {filteredList.map(profile => ( {profile.profileId} ))} )} // 검색창 오른쪽 아이콘 부분 js 문법 부분 const [profiles, setProfiles] = useState([]); const [keyword, setKeyword] = useState(''); // mock data이기 때문에 fetch로 불러왔습니다 us..

노마드코더의 ReactJS로 영화 웹 서비스 만들기 코스 중 todolist 만드는 방법을 따라 js 파일 하나로 구현했고, css 파일은 따로 만들지 않았습니다 완성된 js 파일은 게시물 하단에서 확인하세요 https://nomadcoders.co/react-for-beginners/lobby ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React nomadcoders.co JSX 부분 Comment List Click 우선, jsx를 작성할 때는 모든 태그를 하나의 태그로 감싸줘야하기 때문에 로 전체를 감싸주었습니다 간단하게 로 제목을 만들어주고 안에 과 을 넣어줬습니다 로 선을 그어주어 input과 output(댓글이 입력되는 부분)을 나눠주었습니다 ..

! 공식문서를 참고해서 개념을 다시 한번 확인해주세요 ! 1. react가 많이 사용되는 이유? -react의 등장 배경 현재 웹 어플리케이션이 동적인 상호작용이 많아지고 다뤄야 할 데이터와 코드가 증가하게 됨 -> dom에 직접 접근해서 조작하는 방법으로는 유지보수하기 어려워짐 -> 생산성 향상과 유지보수의 편의를 위해 다양한 framework와 library가 등장 -react가 많이 사용되는 이유 1) 자바스크립트의 library로 자바스크립트의 문법을 그대로 활용함 2) 사용자가 많고 커뮤니티가 발달됨 3) react native를 통해 모바일 어플리케이션 개발도 가능함 -framework vs library framework : 틀 -> 정해진 틀 속에서만 그 흐름에 따라 수동적으로 작업 lib..