[카카오톡 클론코딩]2022.08.07

어제까지 container 들을 쭉 훑어 보았다. 이제 남은 것이 components 부분, store 부분, api 부분이다. (그런데 api 는 앞서 좀 해 놓아서.. 사실상 components 랑 store 보고 나면 전체적인 흐름은 다 잡는 것 같다. ) 

그럼 가장 먼저 components > chatting 을 살펴 보자. 

 components > chatting > Content.tsx 를 보면 export default Content 를 해주고 있다. 앞선 과정에 의해서 Component 는 주로 Container 에서 쓰인다는 것을 알고 있다. 그렇다면 Content 는 어디서 쓰이고 있을까? 

검색 결과, containers > chatting > ChattingContainer.tsx 에서 사용되고 있음을 알 수 있었다. 

import { Header, Content } from '~/components/chatting';

 

class ChattingContainer extends Component<Props> {

state = {

search: ''

};

constructor(props: Props) {

super(props);

const { hideChattingRoom } = props.chatActions;

hideChattingRoom();

window.scrollTo(0, 0);

}

render() {

const userState = this.props.rootState.user;

const { showProfile } = this.props.profileActions;

const { showChattingRoom } = this.props.chatActions;

const changeSearch = (param: string) => {

this.setState({

...this.state,

search: param

});

};

const search = this.state.search.replace(/ /g, '');

return (

<Main>

<Header

userState={userState}

showChattingRoom={showChattingRoom}

changeSearch={changeSearch}

/>

<Content

search={search}

userState={userState}

showProfile={showProfile}

intoRoom={showChattingRoom}

/>

</Main>

);

}

}

바로 이렇게 render 함수 안의 return 함수 안에서 쓰이고 있었다. Content 의 props 로는 search, userState, showProfile, intoRoom 이 사용되는 것을 알 수 있었다. 

 

다시 Content.tsx 로 돌아와서,

interface Props {

search: string;

userState: UserData;

intoRoom(param: CreateRoomRequest): void;

showProfile(userData: UserResponseDto): void;

}

이렇게 코드 초반부에 interface 이용해서 props 타입 지정해 주는 것 확인햇고, 

여기서 메인이라고 할 수 있는 Content 컴포넌트부터 살펴 보자. 

const Content: React.FC<Props> = props => {

const { intoRoom, showProfile, userState, search } = props;

const roomList = userState.room_list.sort((a, b) =>

b.updatedAt.toLocaleString().localeCompare(a.updatedAt.toLocaleString())

);

const friendList = userState.friends_list;

let [rooms, setRooms] = useState([] as Array<RoomListDto>);

let [notFriends, setNotFriends] = useState([] as Array<UserResponseDto>);

/** 채팅방 메뉴가 처음 rendering 되거나,

userState(내 정보, 친구 정보, 방 정보 등)이 바뀔 때, 채팅방 참가자 정보를 바꿈.*/

useEffect(() => {

const getParticipants = async () => {

const getRoomList = await Promise.all(

roomList.map(async room => {

const participant = await Promise.all(

room.participant.map(async val => {

// 참가자가 나 자신인가?

if (userState.id === val) return userState;

// 참가자가 친구 목록에 있는가?

const findParticipant = friendList.find(

friend => friend.id === val

);

if (findParticipant) {

return findParticipant;

}

// 참가자가 기존에 친구 아닌 목록에 있는가?

const findNotFriends = notFriends.find(

person => person.id === val

);

if (findNotFriends) {

return findNotFriends;

}

// 서버에서 참가자 정보를 가져오고, 친구아님 목록에 추가합니다.

const user = await findUserUsingId(val);

await setNotFriends([...notFriends, user]);

return user;

})

);

return { ...room, participant };

})

);

await setRooms([...getRoomList]);

};

getParticipants();

}, [userState]);

// 더블 클릭 시, 채팅방에 입장

const onDoubleClick = (room: RoomListDto) => {

intoRoom({ ...room });

};

const renderRoomList = rooms.map(room => {

if (room.type === 'individual') {

const participant =

room.participant.length > 0 ? room.participant : [userState];

// 채팅 참가자 중, 찾는 사람이 있는 방만 보여줍니다. 검색을 안하면 채팅방 전부 보여줌

const reg_exp = new RegExp(`^.*${search}.*$`);

const findRoom = participant.find(person => {

return person.name.replace(/ /g, '').match(reg_exp);

});

if (!findRoom && !room.room_name.replace(/ /g, '').match(reg_exp)) {

return null;

}

return (

<RoomRow

room_name={room.room_name || participant[0].name}

roomImg={participant[0].profile_img_url || BASE_IMG_URL}

updatedAt={room.updatedAt}

last_chat={room.last_chat}

not_read_chat={room.not_read_chat}

onImgClick={() => showProfile(participant[0])}

onDoubleClick={() => onDoubleClick(room)}

key={room.room_id}

/>

);

}

return null;

});

return <Wrapper>{renderRoomList}</Wrapper>;

};